import React, { Component } from 'react';

import axios from 'axios';
import _, { isEmpty } from 'lodash';
import { connect } from "react-redux";
import { Tabs, Spin, Radio, Input, Space, InputNumber, Avatar, Image, Select, Row, Col, Button, Modal, Checkbox, Switch, Form, Typography, Tooltip, List, Divider } from 'antd';
import { FormOutlined, CloseOutlined, WalletOutlined, WechatOutlined, UnorderedListOutlined, AlipayOutlined, PayCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { apiSendLoginMessage, apiPostMemberCouponList, apiRegisterMember, apiGetServiceClassify, apiGetProductClassify, apiGetStoreServicePage, apiGetProductPage, apiGetMemberInfo, apiGetAmount, apiCreateOrder, apiStandOrderDetail, apiStandOrderCancel, apiGetStandOrderDetail, apiStandOrderSettlement, apiGetSalesmanList, apiOrderPollingPayResult, apiHotelOrderInfoPollingPayResult } from '@/request/cashier';
import { apiUserPage } from "@/request/system/user";
import { apiGetHotelRooms, apiPostHotelOrderInfo, apiPostHotelOrderDetail, apiPostHotelOrderCancel } from "@/request/hotel";
import { apiShoppingBeauticianInfoList } from '@/request/beautician'
import{apiIdentificationCodeAdd} from '@/request/common'
import { apiOrderNoticeStatistic, apiOrderNoticeDel } from '@/request/orderManagement'
import OrderDetails from "../component/OrderDetails";
import HotelDetails from "../../hotelOrder/list/components/detial"
import reduce from '@/assets/icons/reduce.png';
import increase from '@/assets/icons/increase.png';
import member from '@/assets/icons/member.png';
import select from '@/assets/icons/select.png';
import finish from '@/assets/images/finish.png';
import thirdParty from '@/assets/images/thirdParty.png';
import TheImage from '@/components/TheImage';
import ThePagination from '@/components/ThePagination';
import CashierModal from '../component/CashierModal';
import Hotel from '../component/Hotel/HotelRooms.jsx'
import RoomInfo from '../component/Hotel/RoomInfo'
import QRCode from "qrcode.react";
import logoUrl from '@/assets/images/logoIcon.png'
import { phoneReg, verifyCode } from '@/utils/regexp';
import moment from "moment";
import TheButton from "@/components/TheButton";
import '../style/style.less';
import { transNumber } from "@/utils/numberTrans";
import {printQrCode} from '@/utils/toPrint'
const { Search } = Input;
const { TabPane } = Tabs;
const { Option } = Select
const { Paragraph } = Typography;
class Cashier extends Component {
  code = ''
  lastTime = ''
  nextTime = ''
  lastCode = ''
  nextCode = ''
  roomInfoRef = React.createRef()
  productMaxOutRef = React.createRef()
  productMaxOutPriceRef = React.createRef()
  state = {
    otherVisible: false,
    beauticianList: [],
    downCount: null,
    mobileCodeCount: 0,
    register_load: false,
    verificationCode: '',//验证码
    memberName: '',//注册时的用户名称
    tabsServiceData: [],
    tabsCommodityData: [],
    radioOption: [
      {
        title: '服务列表',
        value: 'service'
      },
      {
        title: '商品列表',
        value: 'commodity'
      },
    ],
    buttonValue: 'service',
    serviceData: [],
    commodityData: [],
    serviceSelectData: [],
    commoditySelectData: [],
    priceId: '',
    totalCount: 0,
    totalPrice: 0,
    totalIntegral: 0,
    discountPrice: 0,
    discountReason: '',
    discountVisible: false,
    walletVisible: false,
    memberVisible: false,
    memberMobile: '',
    memberMobileRe: "",
    memberData: {},
    collectionData: [],
    payWayData: [],
    payWay: 'Cash',
    servicePageNo: 1,
    commodityPageNo: 1,
    serviceTotal: 0,
    commodityTotal: 0,
    storeServiceName: '',
    productNameOrCode: '',
    serviceSearchValue: '',
    commoditySearchValue: '',
    thirdLoading: false,
    rejectLoading: false,
    serviceClassifyId: '',
    serviceClassifyName: '',
    productClassifyId: '',
    showIndex: '',
    orderId: '',
    cancelRemark: '订单异常关闭',
    slaesmanData: [],
    shoppingGuideId: '',
    welcomeVisible: true,
    isModalVisible: false,
    payWayDescription: '',
    Visible: false,
    couponVisible: false,
    empower: [],
    CodeTime: 0,
    discountFlag: 0,
    couponFlag: 0,
    vcode: "",
    serviceDiscount: "",
    productDiscount: "",
    vuserId: "",
    discountRemark: "",
    scanCode: false,
    hotelSearch: {
      beginTime: moment().format("YYYY-MM-DD"),
      endTime: moment().add(1, 'days').format('YYYY-MM-DD')
    },
    remoteAlipayVisible: false,
    remoteAlipayResultVisible: false,
    remoteAlipayResultLoading: false,
    remoteWeChatVisible: false,
    remoteWeChatResultVisible: false,
    remoteWeChatResultLoading: false,
    remoteWeChatQrCodeStr: '',
    __html: '',
    detailsVisible: false,
    canPay: true,
    rightsVisible: false,
    couponData: [],
    couponVipList: [],
    couponActiveKey: "1",
    memberCouponIds: [],
    discountMoney: 0,
    haveUseCouponVisible: false,
    couponVisibleOpen: false,
    VisibleOpen: false,
    orderTotalPrice: "",
    discountPriceRecord: 0,
    totalAmount: 0,
    cancelCharge: "",
    fullCoupon: false,
    productMaxOut: '',
    productMaxOutPrice: '',
    productMaxOutId: '',
    productMaxOutInput: false,
    productMaxOutPriceMax: '99999.99',
    fullGoods: ""
  }
  componentWillUnmount() {
    clearInterval(this.state.noticeTimer)
    this.setState({
      noticeTimer: null
    })
  }
  async componentDidMount(state) {
    window.addEventListener('keypress', this.scanWrapper, false);
    await this.getServiceClassify()
    await this.getProductClassify()
    await this.getSalesmanData()
    await this.getDiscountAdmin()
    await this.getBeauticianList()

    // this.setState({
    //   memberMobile: "18810043333"
    // }, () => {
    //   this.memberDialogSave()
    // })

    this.setState({
      showInputFirst: true
    }, () => {
      this.textRef.focus()
      this.setState({
        showInputFirst: false
      })
    })
    const searchParams = new URLSearchParams(this.props.history.location.search);
    const orderId = searchParams.get('orderId');
    const orderType = searchParams.get('type')
    if (orderId && state !== 'reload') {
      let serviceClassifyId = ''
      if (orderType === 'hotel') {
        this.state.tabsServiceData.forEach(item => {
          if (item.serviceClassifyName === '酒店') {
            serviceClassifyId = item.key
          }
        })
        // serviceClassifyId: value, serviceClassifyName: currentObj.tab
      }
      this.setState({
        orderId,
        completionVisible: true,
        serviceClassifyName: orderType === 'hotel' ? '酒店' : this.state.serviceClassifyName,
        serviceClassifyId: orderType === 'hotel' ? serviceClassifyId : this.state.serviceClassifyId,
      }, () => {
        this.continueToPay()
      })
    }

  }
  componentWillUnmount() {
    window.removeEventListener('keypress', this.scanWrapper, false);
  }
  // 获取所有美容师
  async getBeauticianList() {
    let res = await apiShoppingBeauticianInfoList()
    if (res.code === 0 && res.data) {
      this.setState({
        beauticianList: res.data
      })
    }
  }
  // 服务选择美容师
  BeauticianChange = (v, i, e) => {
    const { serviceSelectData } = this.state
    let arr = serviceSelectData.map(value => {
      if (value.serviceId === v.serviceId) {
        return {
          ...value,
          beauticianId: e
        }
      } else {
        return value
      }
    })

    this.setState({ serviceSelectData: arr })
  }
  //获取折扣权限列表
  getDiscountAdmin = async () => {
    let res = await apiUserPage({ pageNo: 1, pageSize: 20000, discountAdmin: '1', status: 'Y' })
    if (res.code === 0 && res.data) {
      let empower = res.data
      this.setState({
        empower: empower
      })
    }
  }
  //获取导购员
  getSalesmanData = async () => {
    let res = await apiGetSalesmanList()
    if (res.data && res.code === 0) {
      let data = res.data.map(v => {
        return {
          label: v.shoppingGuideName,
          value: v.shoppingGuideId
        }
      })
      data.unshift({
        label: '无',
        value: ''
      })
      this.setState({
        slaesmanData: data
      })
    }
  }
  //获取服务类别
  getServiceClassify = async () => {
    let res = await apiGetServiceClassify()
    if (res.code === 0 && res.data) {
      let data = res.data.map(v => {
        return {
          tab: v.serviceClassifyName,
          key: v.serviceClassifyId
        }
      })
      let serviceClassifyId = ''
      if (this.state.serviceClassifyName === '酒店') {
        res.data.forEach((v, i) => {
          if (v.serviceClassifyName === "酒店") {
            serviceClassifyId = v.serviceClassifyId
          }
        })
      } else {
        res.data.forEach((v, i) => {
          serviceClassifyId = res.data[0].serviceClassifyId
        })
      }
      this.setState({
        tabsServiceData: data,
        serviceClassifyId
      }, () => this.getStoreService())
    }
  }
  //获取商品类别
  getProductClassify = async () => {
    let res = await apiGetProductClassify()
    if (res.code === 0 && res.data) {
      let data = res.data.map(v => {
        return {
          tab: v.productClassifyName,
          key: v.productClassifyId
        }
      })
      let productClassifyId = ''
      res.data.forEach((v, i) => {
        productClassifyId = res.data[0].productClassifyId
      })
      this.setState({
        tabsCommodityData: data,
        productClassifyId
      }, () => {
        this.getProductPage()
      })
    }
  }

  //tab切换
  tabChange = (value) => {
    if (this.state.buttonValue === 'service') {
      // 判断当前模块为酒店
      const currentObj = this.state.tabsServiceData.find(item => item.key === value)
      if (currentObj && currentObj.tab === '酒店') {
        // 获取酒店模块下的数据
        this.setState({
          serviceSelectData: [],
          commoditySelectData: [],
          serviceData: [],
          serviceClassifyId: value,
          serviceClassifyName: currentObj.tab,
          memberCouponIds: [],
          couponVisibleOpen: false
        }, () => {
          this.getCombined()
          this.getStoreService()
        })

      } else {
        if (this.state.serviceClassifyName === '酒店') {
          this.setState({
            serviceSelectData: [],
            serviceData: [],
            serviceClassifyId: value,
            serviceClassifyName: currentObj.tab,
            servicePageNo: 1,
            memberCouponIds: [],
            couponVisibleOpen: false
          }, () => {
            this.getCombined()
            this.getStoreService()
          })
        } else {
          if (this.state.serviceClassifyName === "会员卡") {
            this.setState({
              serviceSelectData: [],
              serviceData: [],
              serviceClassifyId: value,
              serviceClassifyName: currentObj.tab,
              servicePageNo: 1,
              memberCouponIds: [],
              couponVisibleOpen: false
            }, () => {
              this.getCombined()
              this.getStoreService()
            })
          } else {
            this.setState({
              serviceData: [],
              serviceClassifyId: value,
              serviceClassifyName: currentObj.tab,
              servicePageNo: 1,
              memberCouponIds: [],
              couponVisibleOpen: false
            }, () => {
              this.getCombined()
              this.getStoreService()
            })
          }
        }
      }
    } else {
      if (this.state.serviceClassifyName === '酒店') {
        this.setState({
          serviceSelectData: [],
          serviceData: [],
          serviceClassifyName: "酒店",
          productClassifyId: value,
          commodityPageNo: 1,
          memberCouponIds: [],
          couponVisibleOpen: false
        }, () => {
          this.getCombined()
          this.getProductPage()
        })
      } else {
        this.setState({ serviceData: [], productClassifyId: value, commodityPageNo: 1 }, () => this.getProductPage())
      }
    }
  }
  // 获取酒店房间筛选条件
  hotelSearch = (values) => {
    if (values.time) {
      values.beginTime = moment(values.time[0]).format("YYYY-MM-DD")
      values.endTime = moment(values.time[1]).format("YYYY-MM-DD")
      delete (values.time)
    }

    this.setState({
      hotelSearch: values
    }, () => {
      this.getStoreService()
    })
  }

  //获取服务对应类别分页
  getStoreService = async () => {
    this.setState({ loading: true })
    const { servicePageNo, serviceClassifyId, storeServiceName, hotelSearch, serviceClassifyName } = this.state
    let res
    // 判断服务类别是否为  酒店
    if (serviceClassifyName === '酒店') {
      res = await apiGetHotelRooms({ ...hotelSearch })
      if (res.code === 0 && res.data) {
        // serviceData
        this.setState({
          hotelDays: res.data.days,
          serviceData: res.data.roomStatusVos.map(v => {
            return {
              ...v,
              count: res.data.days
            }
          }),
        })
      }
    } else {
      res = await apiGetStoreServicePage({ pageNo: servicePageNo, pageSize: 12, serviceClassifyId, storeServiceName, approvalStatus: 'T', serviceStatus: "Y" })
      if (res.code === 0 && res.data) {
        // serviceData
        // console.log(res.data);
        this.setState({
          serviceData: res.data.map(v => {
            return {
              ...v,
              count: 1
            }
          }),
          servicePageNo: res.pageNo,
          serviceTotal: res.totalCount
        })
      }
    }

    this.setState({ loading: false })
  }

  //获取商品对应类别分页
  getProductPage = async () => {
    this.setState({ loading: true })
    const { commodityPageNo, productClassifyId, productNameOrCode } = this.state
    let res = await apiGetProductPage({ pageNo: commodityPageNo, pageSize: 12, classifyId: productClassifyId, productNameOrCode })
    if (res.code === 0 && res.data) {
      this.setState({
        commodityData: res.data.map(v => {
          return {
            ...v,
            count: 1
          }
        }),
        commodityPageNo: res.pageNo,
        commodityTotal: res.totalCount
      })
    }
    this.setState({ loading: false })
  }

  //扫码枪
  scanWrapper = async (e) => {

    this.nextCode = e.which;
    this.nextTime = new Date().getTime();
    if (this.lastCode != null && this.lastTime != null && this.nextTime - this.lastTime <= 100) {
      this.code += String.fromCharCode(this.lastCode);
    } else if (this.lastCode != null && this.lastTime != null && this.nextTime - this.lastTime > 100) {
      this.code = '';
    }
    this.lastCode = this.nextCode;
    this.lastTime = this.nextTime;
    if (e.which === 13 && this.code) {
      // 扫描防伪二维码
      if (this.code.slice(0, 5) == 'HQMHD') {
        let params = {
          activityCode: this.code,
        }
        let res = await React.$post(`/management/activityCode/useActivityCode`, params)
        //console.log(res)
        if (res.code === 0) {
          // //console.log(res)
          return React.$message({
            type: 'info',
            content: res.data.activityName + '剩余' + res.data.residueNum + '次'
          })
        } else {
          return
          // //console.log(res)
          // return React.$message({
          //   type: 'info',
          //   content: res.codeMessage
          // })
        }
      } else {
        if (this.code.slice(0, 3) == 'HQM') {
          let params = {
            code: this.code,
            type: 'S'
          }
          let res = await React.$post(`/management/identificationCode/check`, params)
          if (res.code === 0) {
            // //console.log(res)
            return React.$message({
              type: 'info',
              content: res.codeMessage
            })
          } else {
            // //console.log(res)
            return React.$message({
              type: 'info',
              content: res.codeMessage
            })
          }

        } else {
          //支付扫码
          const { commoditySelectData, orderId, scanCode, canPay } = this.state
          if (scanCode) {
            if (orderId) {
              let aliPay = ['25', '26', '27', '28', '29', '30']
              let weChatPay = ['10', '11', '12', '13', '14', '15']
              let startTwoCode = this.code.slice(0, 2)
              let payWay = this.state.payWay
              let visible = ''

              if (payWay === 'Alipay') {
                if (!aliPay.includes(startTwoCode)) {
                  return React.$message({
                    type: 'info',
                    content: '请出示正确的付款码'
                  })
                } else {
                  visible = 'aliPayVisible'
                }
              }
              if (payWay === 'WeChat') {
                if (!weChatPay.includes(startTwoCode)) {
                  return React.$message({
                    type: 'info',
                    content: '请出示正确的付款码'
                  })
                } else {
                  visible = 'weChatVisible'
                }
              }
              this.setState({ payWay, payCode: this.code }, () => {
                if (!canPay) {
                  return
                } else {
                  this.payWaySettlement(visible)
                  this.setState({
                    canPay: false
                  })
                  setTimeout(() => {
                    this.setState({
                      canPay: true
                    })
                  }, 10000)
                }
              })
            }
            this.code = '';
          } else {
            let idArr = commoditySelectData.map(v => v.propCodeArray)
            if (idArr.includes(this.code)) {
              let arr = commoditySelectData.map(v => {
                if (v.propCodeArray === this.code) {
                  if (_.toNumber(v.skuStock) === _.toNumber(v.count)) {
                    return v
                  } else {
                    return {
                      ...v,
                      count: _.toNumber(v.count) + 1
                    }
                  }
                } else {
                  return v
                }
              })
              this.setState({
                commoditySelectData: arr
              }, () => {
                this.getCombined()
              })
            } else {
              let res = await React.$get(`/management/productInfo/getProductSkuDetailByCode/${this.code}`)
              if (res.code === 0 && res.data) {
                if (parseInt(res.data.skuStock)) {
                  // console.log(res.data.skuStock);
                  let arr = [
                    {
                      ...res.data,
                      productSkuSpecValue: res.data.skuAttribute.map(v => {
                        return v.product_value
                      }).join(';'),
                      count: 1
                    },
                    ...this.state.commoditySelectData
                  ]
                  this.setState({
                    commoditySelectData: arr
                  }, () => this.getCombined())
                } else {
                  React.$message({
                    type: 'info',
                    content: '商品库存不足'
                  })
                }
              }
            }
            this.code = '';
          }
        }
      }
    }
  }
  //防伪码
  // identificationCode = async (e) => {
  //   //console.log(e)
  // }
  //获取服务筛选
  getService = async (value) => {
    if (value) {
      this.setState({
        storeServiceName: value,
        servicePageNo: 1,
        tabsServiceData: [
          {
            tab: '全部',
            key: ''
          }
        ],
        serviceClassifyId: '',
        serviceSearchValue: value
      }, () => this.getStoreService())
    } else {
      this.setState({ serviceSearchValue: '', servicePageNo: 1, storeServiceName: '' })
      await this.getServiceClassify()
      await this.getStoreService()
    }
    this.serviceSearchRef.blur()
  }

  //获取商品筛选
  getCommodity = async value => {
    if (value) {
      this.setState({
        productNameOrCode: value,
        commodityPageNo: 1,
        tabsCommodityData: [
          {
            tab: '全部',
            key: ''
          }
        ],
        productClassifyId: '',
        commoditySearchValue: value
      }, () => this.getProductPage())
    } else {
      this.setState({ commodityPageNo: 1, commoditySearchValue: '', productNameOrCode: '' })
      await this.getProductClassify()
      await this.getProductPage()
    }
    this.commoditySearchRef.blur()
  }

  //服务/商品切换
  buttonChange = (e) => {
    const { memberCouponIds, commoditySelectData, serviceSelectData } = this.state
    if (e.target.value === 'commodity') {
      if (this.state.serviceClassifyName === '酒店') {
        this.setState({ serviceSelectData: [], buttonValue: e.target.value, }, () => {
          if (!isEmpty(memberCouponIds)) {
            this.setState({
              memberCouponIds: [],
              couponVisibleOpen: false
            })
          }
          this.getCombined()
        })
      } else if (this.state.serviceClassifyName === '会员卡') {
        this.setState({ serviceSelectData: [], buttonValue: e.target.value, }, () => {
          if (!isEmpty(memberCouponIds)) {
            this.setState({
              memberCouponIds: [],
              couponVisibleOpen: false
            })
          }
          this.getCombined()
        })
      } else {
        this.setState({ buttonValue: e.target.value })
      }
    } else {
      if (this.state.serviceClassifyName === '酒店') {
        if (!isEmpty(commoditySelectData)) {
          return React.$message({
            type: 'warning',
            content: '酒店房间不能与其他商品一起购买'
          })
        }
        if (!isEmpty(serviceSelectData)) {
          return React.$message({
            type: 'warning',
            content: '酒店房间不能与其他服务一起购买'
          })
        }
        this.getStoreService()
        this.setState({ buttonValue: e.target.value })
      } else {
        this.getStoreService()
        this.setState({ buttonValue: e.target.value })
      }
    }
  }

  //加入服务购物车
  putCar = value => {
    // console.log(value, 'putCar');
    let { buttonValue, serviceData, serviceClassifyName, serviceSelectData, hotelSearch, memberCouponIds } = this.state
    if (buttonValue === 'service') {
      if (serviceClassifyName === '酒店') {
        if (value.serviceClassifyName.indexOf('酒店') > -1 && _.isEmpty(this.state.memberData)) {
          return React.$message({
            type: 'warning',
            content: '选择会员后添加购物车'
          })
        }
        value.index = serviceSelectData.length
        value.beginTime = moment(hotelSearch.beginTime)
        value.endTime = moment(hotelSearch.endTime)
        if (serviceSelectData.length >= 1) {
          React.$message({
            type: "warning",
            content: "一单不可预定多个房间"
          })
          return
        } else {
          serviceSelectData.push(value)
        }
        this.setState({
          serviceSelectData: serviceSelectData
        }, () => this.getCombined())
      } else {//非酒店类服务
        const { serviceSelectData, commoditySelectData, memberCouponIds } = this.state
        let arr = JSON.parse(JSON.stringify(serviceSelectData))
        let arr2 = JSON.parse(JSON.stringify(commoditySelectData))

        // 储值卡不与其他商品同时购买
        let serviceCardIds = arr.filter(item => item.serviceClassifyName.indexOf('会员卡') === -1)
        let memberCardIds = arr.filter(item => item.serviceClassifyName.indexOf('会员卡') > -1)

        if ((serviceCardIds.length > 0 || arr2.length > 0) && value.serviceClassifyName.indexOf('会员卡') > -1) {
          return React.$message({
            type: 'warning',
            content: '充值卡不能与其他商品一起购买'
          })
        }
        if (memberCardIds.length > 0 && value.serviceClassifyName.indexOf('会员卡') === -1) {
          return React.$message({
            type: 'warning',
            content: '充值卡不能与其他商品一起购买'
          })
        }
        if (value.serviceClassifyName.indexOf('会员卡') > -1 && _.isEmpty(this.state.memberData)) {
          return React.$message({
            type: 'warning',
            content: '选择会员后添加购物车'
          })
        }
        if (!isEmpty(memberCouponIds)) {
          React.$message({
            type: 'info',
            content: '结算商品数量发生变化，请重新选择折扣和优惠券！'
          })
        }
        arr.unshift(value)
        this.setState({
          serviceSelectData: arr.map((v, i) => {
            return {
              ...v,
              index: i
            }
          }),
          memberCouponIds: [],
          couponVisibleOpen: false
        }, () => this.getCombined())
      }
    }
  }

  //移出购物车
  outCar = (value, type) => {
    if (type === 'service') {
      const { serviceSelectData, couponVisibleOpen } = this.state
      let arr = serviceSelectData.filter(v => {
        // console.log(v);
        return v.index !== value.index
      })
      if (couponVisibleOpen) {
        this.setState({ serviceSelectData: arr, memberCouponIds: [], couponVisibleOpen: false }, () => {
          React.$message({
            type: "info",
            content: "结算商品发生变化，请重新选择折扣和优惠券！"
          })
          this.getCombined()
        })
      } else {
        this.setState({
          serviceSelectData: arr
        }, () => {
          this.fullCouponChange(false)
          // this.getCombined()
        })
      }
    }
    if (type === 'commodity') {
      const { commoditySelectData, couponVisibleOpen } = this.state
      let arr = commoditySelectData.filter(v => {
        return v.productSkuId !== value.productSkuId
      })
      if (couponVisibleOpen) {
        this.setState({ commoditySelectData: arr, memberCouponIds: [], couponVisibleOpen: false }, () => {
          React.$message({
            type: "info",
            content: "结算商品发生变化，请重新选择折扣和优惠券！"
          })
          this.getCombined()
        })
      } else {
        this.setState({
          commoditySelectData: arr
        }, () => {
          this.fullCouponChange(false)
          // this.getCombined()
        })
      }
    }
  }

  //修改购物车数量
  countChange = (from, value, type, e, ref) => {
    if (from === 'commodity') {
      const { commoditySelectData, memberCouponIds } = this.state
      let arr = []
      let max = _.toNumber(value.skuStock)
      if (type === 'reduce') {
        arr = commoditySelectData.map(v => {
          if (v.productSkuId === value.productSkuId) {
            if (_.toNumber(v.count) === 1) {
              return v
            }
            return {
              ...v,
              count: v.count - 1
            }
          } else {
            return v
          }
        })
      }
      if (type === 'add') {
        arr = commoditySelectData.map(v => {
          if (_.toNumber(v.count) >= max) {
            return v
          } else {
            if (v.productSkuId === value.productSkuId) {
              return {
                ...v,
                count: v.count + 1
              }
            } else {
              return v
            }
          }
        })
      }
      if (type === 'input') {
        arr = commoditySelectData.map(v => {
          if (v.productSkuId === value.productSkuId) {
            if (_.toNumber(e) > _.toNumber(max)) {
              return {
                ...v,
                count: _.toNumber(max)
              }
            } else if (_.toNumber(e) <= 0) {
              return {
                ...v,
                count: 1
              }
            } else {
              return {
                ...v,
                count: _.toNumber(e)
              }
            }
          } else {
            return v
          }
        })
        this[ref].blur()
      }
      if (!isEmpty(memberCouponIds)) {
        React.$message({
          type: "info",
          content: "结算商品数量发生变化，请重新选择折扣和优惠券！"
        })
      }
      this.setState({ commoditySelectData: arr, memberCouponIds: [], couponVisibleOpen: false },
        () => {
          this.fullCouponChange(false)
          // this.getCombined()
        })
    }
    if (from === 'service') {
      const { serviceSelectData } = this.state
      let arr = []
      if (type === 'reduce') {
        arr = serviceSelectData.map(v => {
          if (v.serviceId === value.serviceId) {
            if (v.count === 1) return
            return {
              ...v,
              count: v.count - 1
            }
          } else {
            return v
          }
        })
      }
      if (type === 'add') {
        arr = serviceSelectData.map(v => {
          if (v.serviceId === value.serviceId) {
            return {
              ...v,
              count: v.count + 1
            }
          } else {
            return v
          }
        })
      }
      if (type === 'input') {
        arr = serviceSelectData.map(v => {
          if (v.serviceId === value.serviceId) {
            return {
              ...v,
              count: _.toNumber(e)
            }
          } else {
            return v
          }
        })
        this[ref].blur()
      }
      this.setState({ serviceSelectData: arr }, () => this.getCombined())
    }
  }

  //加入商品购物车
  putCommodityCar = value => {
    const { buttonValue, commoditySelectData, serviceSelectData, memberCouponIds } = this.state
    let arr = JSON.parse(JSON.stringify(commoditySelectData))
    if (buttonValue === 'commodity') {
      let arr2 = JSON.parse(JSON.stringify(serviceSelectData))
      // 储值卡不与其他商品同时购买
      let memberCardIds = arr2.filter(item => item.serviceClassifyName.indexOf('会员卡') > -1)

      if (memberCardIds.length > 0) {
        return React.$message({
          type: 'warning',
          content: '充值卡不能与其他商品一起购买'
        })
      }
      if (!isEmpty(memberCouponIds)) {
        React.$message({
          type: 'info',
          content: '结算商品数量发生变化，请重新选择折扣和优惠券！'
        })
      }

      let productSkuId = value.productSkuId
      let idArr = commoditySelectData.map(v => v.productSkuId)
      if (idArr.includes(productSkuId)) {
        arr = arr.map(v => {
          if (v.productSkuId === value.productSkuId) {
            return {
              ...v,
              count: v.count + 1
            }
          } else {
            return v
          }
        })
      } else {
        arr.unshift(value)
      }
    }
    this.setState({
      commoditySelectData: arr, memberCouponIds: [],
      couponVisibleOpen: false
    }, () => {
      this.fullCouponChange(false)
      // this.getCombined()
    })
  }
  // 获取酒店订单购物车信息
  getValues = (values) => {
    // console.log(values);
    const { serviceSelectData, memberCouponIds } = this.state
    if (values !== serviceSelectData && !isEmpty(memberCouponIds)) {
      React.$message({
        type: "info",
        content: "房间结算发生变化，请重新选择优惠券！"
      })
      this.setState({
        serviceSelectData: values,
        memberCouponIds: [],
        couponVisibleOpen: false
      }, () => {
        this.getCombined()
      })
    } else {
      this.setState({
        serviceSelectData: values,
      }, () => {
        this.getCombined()
      })
    }
  }
  //获取合计
  getCombined = async () => {
    const { serviceSelectData, commoditySelectData, memberCouponIds, memberData, discountPrice, discountReason, discountFlag, vcode, serviceDiscount, productDiscount, vuserId, discountRemark, productMaxOut, productMaxOutId, productMaxOutPrice } = this.state
    let deductionPrice = _.toNumber(React.$transNum(discountPrice, 0, 2))
    let orderRemark = discountReason
    let cardServiceList = []
    let storeServiceList = []
    let maxOutPrice = productMaxOutPrice * 100
    if (_.isEmpty(memberCouponIds)) {
      this.setState({
        couponVisibleOpen: false
      })
    }
    serviceSelectData.forEach(v => {
      //判断是否为会员卡类目，提取id集合
      if (v.hasOwnProperty('serviceClassifyName') && v.serviceClassifyName.indexOf('会员卡') > -1) {
        cardServiceList.push({
          count: v.count,
          serviceId: v.serviceId,
          price: _.toNumber(v.serviceRealPrice)
        })
        return
      }
      // 判断是否为酒店类目
      if (v.hasOwnProperty('serviceClassifyName') && v.serviceClassifyName.indexOf('酒店') > -1) {
        cardServiceList.push({
          ...v,
          price: _.toNumber(v.serviceRealPrice)
        })
        return
      }
      storeServiceList.push({
        count: v.count,
        serviceId: v.serviceId,
        price: _.toNumber(v.serviceRealPrice),
        beauticianId: v.hasOwnProperty('beauticianId') && v.beauticianId ? v.beauticianId : ''
      })
    })
    let productList = commoditySelectData.map(v => {
      return {
        productSkuId: v.productSkuId,
        count: v.count
      }
    })
    let memberId = _.isEmpty(memberData) ? '' : memberData.memberId
    // 获取合计
    let res = await apiGetAmount({
      memberId,
      productList,
      storeServiceList,
      deductionPrice,
      orderRemark,
      cardServiceList,
      discountFlag,
      userPassword: vcode,
      serviceDiscount,
      productDiscount,
      vuserId,
      discountRemark,
      memberCouponIds,
      productMaxOut,
      productMaxOutId,
      productMaxOutPrice: maxOutPrice
    })
    if (res.code === 0 && res.data) {
      this.setState({
        totalCount: res.data.totalItems,
        totalPrice: res.data.afterDiscountAmount,
        totalIntegral: res.data.totalScore,
        totalAmount: res.data.totalAmount,
        discountMoney: (res.data.totalAmount - res.data.afterDiscountAmount),
        Visible: false,
        couponVisible: false,
      }, () => {
        let v = this.state.totalAmount - this.state.discountPriceRecord
        this.getUserCouponList(v)
      })
    }
  }

  //会员dialog
  memberDialogOpen = () => {
    if (this.state.downCount) {
      clearInterval(this.state.downCount)
    }
    this.setState({ memberVisible: true, verificationCode: '', memberName: '', mobileCodeCount: 0, downCount: null, memberData: '' })
  }
  //修改输入的会员手机号
  getMemberMobile = (e) => {
    this.setState({ memberMobile: e.target.value })

  }

  getMemberMobileRepeat = (e) => {
    this.setState({ memberMobileRe: e.target.value })
  }

  getMobileCode = (e) => {
    this.setState({ verificationCode: e.target.value })
    //console.log(this.state.verificationCode);
  }
  // 修改输入的会员用户名称
  getMemberName = (e) => {
    this.setState({ memberName: e.target.value })
  }
  //选择会员dialog保存 根据输入的会员手机号调取会员信息
  memberDialogSave = async () => {
    const { totalPrice, discountPriceRecord } = this.state
    if (phoneReg.test(this.state.memberMobile)) {
      let res = await apiGetMemberInfo({ memberMobile: this.state.memberMobile })
      if (res.code === 0 && res.data) {
        this.setState({
          memberData: res.data,
        }, () => {
          this.getUserCouponList(totalPrice - discountPriceRecord)
        })
        this.memberDialogClose()
      }
      // 查询未注册会员返回
      if (res.code === 1000 && !res.data) {
        this.setState({
          memberData: null
        })
      }
    } else {
      return React.$message({
        type: 'info',
        content: '请输入正确格式的手机号码'
      })
    }
  }
  /**
   * 根据会员ID获取会员优惠券
  */
  getUserCouponList = async (value) => {
    const { memberData } = this.state
    let res = await apiPostMemberCouponList({ amount: value, memberId: memberData.memberId })
    if (res.code === 0) {
      let noUsedMemberCouponList = res.data.invalidMemberCouponList.concat(res.data.validMemberCouponList)
      let couponList = {
        noUsedMemberCouponList,
        ...res.data
      }
      this.setState({
        couponVipList: couponList
      })
    }
  }
  /**
   * @description 获取验证码
   */
  getVerifyCode = async () => {

    if (this.state.mobileCodeCount > 0) {
      return false
    }
    this.setState({ register_load: true })
    let res = await apiSendLoginMessage({ phone: this.state.memberMobile })
    //console.log(res, 'res获取验证码');
    if (res.code === 0) {
      this.setState({
        mobileCodeCount: 60,
        register_load: false
      })
      let downCount = setInterval(() => {
        this.setState({
          mobileCodeCount: this.state.mobileCodeCount - 1
        })
        if (this.state.mobileCodeCount === 0) {
          clearInterval(downCount)
          this.setState({
            downCount: null
          })
        }
      }, 1000);
      this.setState({
        downCount
      })
    }
  }
  /**
   * @description 注册会员
   */
  registerMember = async () => {
    const { memberMobile, memberMobileRe, memberName } = this.state
    if (!phoneReg.test(this.state.memberMobile)) {
      return React.$message({
        type: 'warning',
        content: '请输入正确格式的手机号码'
      })
    }
    if (memberMobile !== memberMobileRe) {
      return React.$message({
        type: 'warning',
        content: '两次输入的手机号码不同'
      })
    }
    //console.log(verifyCode.test(this.state.verificationCode));
    // if (!verifyCode.test(this.state.verificationCode)) {
    //   return React.$message({
    //     type: 'warning',
    //     content: '请输入6位验证码'
    //   })
    // }
    let res = await apiRegisterMember({ memberMobile: memberMobile, wxNickName: memberName })
    if (res.code === 0 && res.data) {
      this.memberDialogSave()
    }
    // else {
    //   return React.$message({
    //     type: 'warning',
    //     content: res.codeMessage
    //   })
    // }

  }
  //关闭会员dialog
  memberDialogClose = () => {
    this.setState({ memberVisible: false, mobileCodeCount: 0, verificationCode: '', memberName: '' })
  }
  //清除会员信息
  clearMemberData = () => {
    const { serviceSelectData, commodityData, memberCouponIds } = this.state
    if ((!_.isEmpty(serviceSelectData) || !_.isEmpty(commodityData)) && !_.isEmpty(memberCouponIds)) {
      React.$message({
        type: 'info',
        content: '清除会员信息优惠券不可用，恢复原价'
      })
    }
    // console.log(serviceSelectData);
    if (serviceSelectData.length > 0) {
      serviceSelectData.forEach(v => {
        // 判断是否为酒店类目
        if (v.hasOwnProperty('serviceClassifyName') && v.serviceClassifyName.indexOf('酒店') > -1) {
          React.$confirm({
            title: '关闭会员信息将同步删除未完成的房间订单！',
            onOk: () => {
              this.setState({ memberData: '', serviceSelectData: [], memberCouponIds: [], couponVisibleOpen: false }, () => {
                this.getCombined()
              })
            }
          })
        } else {
          this.setState({ memberData: '', memberCouponIds: [], couponVisibleOpen: false }, () => {
            this.getCombined()
          })
        }
      })
    } else {
      this.setState({ memberData: '', memberCouponIds: [], couponVisibleOpen: false }, () => {
        this.getCombined()
      })
    }
  }
  //打开改价dialog
  openDiscountDialog = () => {
    const { discountPrice, discountReason } = this.state
    this.setState({
      discountVisible: true,
      discountPriceRecord: discountPrice,
      discountReasonRecord: discountReason
    })
  }
  //改价金额
  discountPriceChange = e => {
    this.setState({ discountPriceRecord: e || 0 })
  }
  //改价原因
  discountReasonChange = (e) => {
    this.setState({ discountReasonRecord: e.target.value })
  }
  //改价dialog保存
  discountDialogSave = () => {
    const { discountPriceRecord, discountReasonRecord } = this.state
    this.setState({
      discountPrice: discountPriceRecord,
      discountReason: discountReasonRecord
    }, () => {
      this.discountDialogClose()
      this.getCombined()
    })
  }
  //关闭改价dialog
  discountDialogClose = () => {
    this.setState({ discountVisible: false, discountPriceRecord: 0, discountReasonRecord: '' })
  }
  //获取结算信息
  collectionDialogOpen = async () => {

    const { serviceSelectData, memberData, memberCouponIds, commoditySelectData, discountPrice, discountReason, discountFlag, vcode, serviceDiscount, productDiscount, vuserId, discountRemark, serviceClassifyName, productMaxOut, productMaxOutId, productMaxOutPrice } = this.state
    let maxOutPrice = productMaxOutPrice * 100
    if (!_.size(serviceSelectData) && !_.size(commoditySelectData)) {
      return React.$message({
        type: 'info',
        content: '请选择服务或商品'
      })
    }
    let deductionPrice = React.$transNum(discountPrice, 0, 2)
    let orderRemark = discountReason
    let memberId = _.isEmpty(memberData) ? '' : memberData.memberId
    let productList = commoditySelectData.map(v => {
      return {
        count: v.count,
        productSkuId: v.productSkuId
      }
    })
    let cardServiceList = []
    let hotelServiceList = null
    let storeServiceList = []
    if (serviceClassifyName === '酒店') {
      this.roomInfoRef.current.onFinish().then(success => {
        serviceSelectData.forEach(async v => {
          hotelServiceList = {
            beginTime: moment(v.beginTime).format('YYYY-MM-DD'),
            endTime: moment(v.endTime).format('YYYY-MM-DD'),
            roomId: v.roomId,
            serviceId: v.serviceId,
            petsId: v.ordermsg.petName,
            memberName: v.ordermsg.memberName,
            memberPhone: v.ordermsg.memberMobile,
            orderPayPrice: _.toNumber(v.serviceRealPrice),
            cashierRemark: v.cashierRemark ? v.cashierRemark : ""
          }
        })
        apiPostHotelOrderInfo({
          memberId, ...hotelServiceList, deductionPrice, orderRemark, productList, storeServiceList,
          cardServiceList, discountFlag, vcode, serviceDiscount, productDiscount, vuserId, discountRemark, memberCouponIds,
          url: window.location.href.split('?')[0]
        }).then(res => {
          if (res.data && res.code === 0) {
            this.initData(res.data)
            this.setState({ collectionVisible: true })
            this.setState({
              Visible: false,
            })
          }
        })
      }).catch(err => {
        // 购物车信息不完整
      })
    } else {
      serviceSelectData.forEach(async v => {
        //判断是否为会员卡类目，提取id集合
        if (v.hasOwnProperty('serviceClassifyName') && v.serviceClassifyName.indexOf('会员卡') > -1) {
          cardServiceList.push({
            count: v.count,
            serviceId: v.serviceId,
            giveCoupon: v.giveCoupon,
            price: _.toNumber(v.serviceRealPrice)
          })
          return
        }
        //console.log(v);
        storeServiceList.push({
          count: v.count,
          serviceId: v.serviceId,
          price: _.toNumber(v.serviceRealPrice),
          beauticianId: v.hasOwnProperty('beauticianId') && v.beauticianId ? v.beauticianId : ''
        })
      })
      if (cardServiceList.length > 0 && _.isEmpty(memberData)) {
        // 提示登陆
        return React.$message({
          type: 'warning',
          content: '请选择会员'
        })
      }
      let res = await apiCreateOrder({
        deductionPrice, orderRemark, memberId, productList, storeServiceList, cardServiceList,
        discountFlag, userPassword: vcode, serviceDiscount, productDiscount, vuserId, discountRemark, memberCouponIds,
        url: window.location.href.split('?')[0], productMaxOut,
        productMaxOutId,
        productMaxOutPrice: maxOutPrice
      })
      if (res.data && res.code === 0) {
        this.initData(res.data)
        this.setState({ collectionVisible: true })
        this.setState({
          Visible: false,
        })
      }
    }
  }
  //结算dialog关闭
  collectionDialogClose = () => {
    this.setState({ collectionVisible: false })
  }
  //结算dialog保存
  collectionDialogSave = () => {
    const { payWay } = this.state
    if (payWay === 'Cash') {
      this.setState({ cashVisible: true, collectionVisible: false, cashPriceReason: '' })
    }
    if (payWay === 'Wallet') {
      this.setState({ walletVisible: true, collectionVisible: false, cashPriceReason: '' })
    }
    if (payWay === 'Alipay') {
      this.setState({ aliPayVisible: true, collectionVisible: false, cashPriceReason: '' })
    }
    if (payWay === 'WeChat') {
      this.setState({ weChatVisible: true, collectionVisible: false, cashPriceReason: '' })
    }
    if (payWay === 'RemoteAlipay') {
      this.setState({ remoteAlipayVisible: true, collectionVisible: false, cashPriceReason: '' })
    }
    if (payWay === 'RemoteWeChat') {
      this.setState({ remoteWeChatVisible: true, collectionVisible: false, cashPriceReason: '' })
    }
    if (payWay === 'Other') {
      this.setState({ otherVisible: true, collectionVisible: false, cashPriceReason: '' })
    }
  }
  //取消收款
  collectionDialogReject = () => {
    const { orderId } = this.state
    if (orderId) {
      React.$confirm({
        title: '您确认取消该笔订单吗？',
        onOk: () => {
          this.setState({
            rejectVisible: true,
            discountFlag: 0,
            couponFlag: 0,
            vcode: "",
            serviceDiscount: "",
            productDiscount: "",
            vuserId: "",
            discountRemark: "",
          })
        }
      })
    }
  }
  //结算方式切换
  payWayChange = (e) => {
    this.setState({ payWay: e.target.value })
  }
  //现金结算dialog关闭
  cashDialogClose = () => {
    this.setState({ cashVisible: false, collectionVisible: true, cashPrice: 0, cashPriceReason: 0 })
  }
  //其它结算dialog关闭
  otherDialogClose = () => {
    this.setState({ otherVisible: false, collectionVisible: true, cashPrice: 0, cashPriceReason: 0 })
  }
  // 扫码支付（支付宝）关闭
  remoteAlipayDialogClose = () => {
    this.setState({ remoteAlipayVisible: false, collectionVisible: true, cashPrice: 0, cashPriceReason: 0 })
  }
  // 扫码支付（支付宝）保存
  remoteAlipayDialogSave = () => {
    this.setState({
      remoteAlipayVisible: false,
      cashPriceReason: this.state.amountPrice
    }, () => this.payWaySettlement('remoteAlipayVisible'))

  }

  // 扫码支付（微信）关闭
  remoteWeChatDialogClose = () => {
    this.setState({ remoteWeChatVisible: false, collectionVisible: true, cashPrice: 0, cashPriceReason: 0 })
  }
  // 扫码支付（微信）保存
  remoteWeChatDialogSave = () => {
    this.setState({
      remoteWeChatVisible: false,
      cashPriceReason: this.state.amountPrice
    }, () => this.payWaySettlement('remoteWeChatVisible'))

  }
  //现金结算dailog保存
  cashDialogSave = () => {
    this.setState({
      cashVisible: false
    })
    this.payWaySettlement('cashVisible')
  }
  //其它结算dailog保存
  otherDialogSave = () => {
    this.setState({
      otherVisible: false
    })
    this.payWaySettlement('otherVisible')
  }
  //现金结算备注
  payWayDescriptionChange = (e) => {
    this.setState({
      payWayDescription: e.target.value
    })
  }
  // 余额结算dialog关闭
  walleDialogClose = () => {
    this.setState({ walletVisible: false, collectionVisible: true, cashPrice: 0, cashPriceReason: 0 })

  }
  //余额结算dailog保存
  walletDialogSave = () => {
    this.setState({
      walletVisible: false
    })
    this.payWaySettlement('walletVisible')
  }
  //找零dialog保存
  settlementDialogSave = () => {
    this.setState({ settlementVisible: false, completionVisible: true }, () => this.continueToPay())
  }
  //找零dialog关闭
  settlementDialogClose = () => {
    this.setState({ settlementVisible: false, completionVisible: true }, () => this.continueToPay())
  }
  //输入收到现金金额
  cashChange = e => {
    this.setState({ cashPriceReason: e })
  }
  //完成结算关闭dialog还原变量
  completionDialogClose = async () => {

    let { orderId, shoppingGuideId } = this.state
    this.setState({
      discountFlag: 0,
      couponFlag: 0,
      vcode: "",
      serviceDiscount: "",
      productDiscount: "",
      vuserId: "",
      discountRemark: "",
    })
    if (this.state.serviceClassifyName !== '酒店') {
      // let response = await apiStandOrderSettlement({ orderId, shoppingGuideId })
      // if (response.code === 0) {
      let res = await apiGetStandOrderDetail({ orderId })
      if (res.data && res.code === 0) {
        this.print(res.data, this.initState)
      } else {
        this.initState()

      }
      // }
    } else {
      let res = await apiPostHotelOrderDetail({ orderId })
      if (res.data && res.code === 0) {
        this.print(res.data, this.initState)
      } else {
        this.initState()

      }
    }
  }

  //三方支付dialog关闭
  thirdPartyDialogClose = () => {
    this.setState({ thirdPartyVisible: false, collectionVisible: true, thirdLoading: false, scanCode: false })
  }
  //支付宝扫码支付dialog关闭
  remoteAlipayResultDialogClose = () => {
    this.setState({ remoteAlipayResultVisible: false, collectionVisible: true, thirdLoading: false, scanCode: false })
  }
  //支付宝扫码支付dialog确认收款

  remoteAlipayResultDialogSave = () => {
    const punchout_form = document.querySelector('form[name="punchout_form"]')
    punchout_form.submit()
  }

  //微信扫码支付dialog关闭
  remoteWeChatResultDialogClose = () => {
    this.setState({ remoteWeChatResultVisible: false, collectionVisible: true, thirdLoading: false, scanCode: false })
  }

  //分页查询
  pageChange = (pageNo) => {
    const { buttonValue } = this.state
    if (buttonValue === 'service') {
      this.setState({ servicePageNo: pageNo }, () => this.getStoreService())
    }
    if (buttonValue === 'commodity') {
      this.setState({ commodityPageNo: pageNo }, () => this.getProductPage())
    }
  }
  //支付宝付款关闭
  alipayDialogClose = () => {
    this.setState({
      aliPayVisible: false,
      collectionVisible: true
    })
  }
  alipayDialogSave = () => {
    const { cashPriceReason } = this.state
    if (!cashPriceReason) {
      return React.$message({
        type: 'info',
        content: '请输入金额'
      })
    }
    this.setState({
      aliPayVisible: false,
      thirdPartyVisible: true,
      scanCode: true
    })
  }
  //微信
  weChatDialogSave = () => {
    const { cashPriceReason } = this.state
    if (!cashPriceReason) {
      return React.$message({
        type: 'info',
        content: '请输入金额'
      })
    }
    this.setState({
      weChatVisible: false,
      thirdPartyVisible: true,
      scanCode: true
    })
  }
  weChatDialogClose = () => {
    this.setState({
      weChatVisible: false,
      collectionVisible: true
    })
  }
  payWaySettlement = async (visible) => {
    const { payWay, orderId, cashPriceReason, payCode, payWayDescription, shoppingGuideId, serviceSelectData } = this.state
    // console.log("cashPriceReason:", cashPriceReason);
    if (cashPriceReason === "" || cashPriceReason === null) {
      if (payWay == 'Wallet') {
        this.setState({
          walletVisible: true
        })
        return React.$message({
          type: 'info',
          content: '请输入金额'
        })
      }
      if (payWay == 'Cash') {
        this.setState({
          cashVisible: true
        })
        return React.$message({
          type: 'info',
          content: '请输入金额'
        })
      }
      if (payWay == 'Other') {
        this.setState({
          otherVisible: true
        })
        return React.$message({
          type: 'info',
          content: '请输入金额'
        })
      }
    }
    if (payWayDescription === "" || payWayDescription == null) {
      if (payWay == 'Other') {
        this.setState({
          otherVisible: true
        })
        return React.$message({
          type: 'info',
          content: '请输入备注'
        })
      }
    }
    let orderPayPrice = React.$transNum(cashPriceReason, 0, 2)
    let value = {}
    if (payWay === 'Cash' || payWay === 'Wallet') {
      value = {
        orderId,
        orderPayPrice,
        payWayDescription,
        shoppingGuideId
      }
    } else if (payWay === 'RemoteAlipay') {
      value = {
        orderId,
        orderPayPrice: cashPriceReason,
        shoppingGuideId
      }
    } else if (payWay === 'RemoteWeChat') {
      value = {
        orderId,
        orderPayPrice: cashPriceReason,
        shoppingGuideId
      }
    } else if (payWay === 'Other') {
      value = {
        orderId,
        orderPayPrice,
        otherPayDescription: payWayDescription,
        shoppingGuideId
      }
    }
    else {
      value = {
        orderId,
        orderPayPrice,
        payCode,
        shoppingGuideId
      }
    }
    this.setState({ thirdLoading: true }, () => {
      if (this.state.serviceClassifyName === '酒店') {
        //酒店收款接口
        // console.log(serviceSelectData);
        React.$post(`/management/hotelOrderInfo/hotelOrderPay/${payWay}`, { ...value }, { timeout: 60000 }).then(res => {
          if (res.data && res.code === 0) {
            if (payWay === 'RemoteAlipay') {
              this.setState({
                __html: res.data.url,
                remoteAlipayResultVisible: true,
                thirdLoading: false, cashPriceReason: "", payWay,
              }, () => {
              })
              return false;
            }
            if (payWay === 'RemoteWeChat') {
              this.setState({
                remoteWeChatQrCodeStr: res.data.url,
                remoteWeChatResultVisible: true,
                thirdLoading: false, cashPriceReason: "", payWay,
              }, () => {
                this.hotelOrderPollingPayResult(orderId)

              })
              return false;
            }
            const { status } = res.data
            if (status === false) {
              this.continueToPay()
              this.setState({ [visible]: false, collectionVisible: true })
            } else if (status === true) {
              const { amount } = res.data
              if (amount > 0) {
                this.setState({ [visible]: false, settlementVisible: true, differencePrice: amount, cashPrice: cashPriceReason })
              } else {
                this.continueToPay()
                this.setState({ completionVisible: true, [visible]: false })
              }
            }
            this.setState({ thirdLoading: false, cashPriceReason: "", payWay, scanCode: false })
          } else {
            this.setState({
              thirdLoading: false, cashPriceReason: "", payWay,
              thirdPartyVisible: false, collectionVisible: true, scanCode: false
            })
          }
        }).catch(err => {
          React.$message({
            type: 'error',
            content: '支付超时，请重新支付'
          })
          this.setState({ thirdLoading: false, cashPriceReason: "", payWay, thirdPartyVisible: false, collectionVisible: true, scanCode: false })
        })
      } else {
        React.$post(`/management/order/standOrderPay/${payWay}`, { ...value }, { timeout: 60000 }).then(res => {
          if (res.data && res.code === 0) {
            if (payWay === 'RemoteAlipay') {
              this.setState({
                __html: res.data.url,
                remoteAlipayResultVisible: true,
                thirdLoading: false, cashPriceReason: "", payWay,
              }, () => {
              })
              return false;
            }
            if (payWay === 'RemoteWeChat') {
              this.setState({
                remoteWeChatResultVisible: true,
                remoteWeChatQrCodeStr: res.data.url,
                thirdLoading: false, cashPriceReason: "", payWay,
              }, () => {
                this.pollingPayResult(orderId)
              })
              return false;
            }
            const { status } = res.data
            if (status === false) {
              this.continueToPay()
              this.setState({ [visible]: false, collectionVisible: true, payWayDescription: "" })
            } else if (status === true) {
              const { amount } = res.data
              if (amount > 0) {
                this.setState({ [visible]: false, settlementVisible: true, differencePrice: amount, cashPrice: cashPriceReason, payWayDescription: "" })
              } else {
                this.continueToPay()
                this.setState({ completionVisible: true, [visible]: false, payWayDescription: "" })
              }
            }
            this.setState({ thirdLoading: false, cashPriceReason: "", payWay, scanCode: false })
          } else {
            this.setState({
              thirdLoading: false, cashPriceReason: "", payWay,
              thirdPartyVisible: false, collectionVisible: true, scanCode: false, payWayDescription: ""
            })
          }
        }).catch(err => {
          React.$message({
            type: 'error',
            content: '支付超时，请重新支付'
          })
          this.setState({ thirdLoading: false, cashPriceReason: "", payWayDescription: "", payWay, thirdPartyVisible: false, collectionVisible: true, scanCode: false })
        })
      }
    })

  }


  hotelOrderPollingPayResult = async (orderId) => {
    if (!this.state.remoteWeChatResultVisible) return
    const res = await apiHotelOrderInfoPollingPayResult({ orderId })
    if (res.code == 0) {
      const { status } = res.data
      if (status == 'success') {
        this.setState({
          orderId,
          completionVisible: true,
          remoteWeChatResultVisible: false
        }, () => {
          this.continueToPay()
        })
      } else if (status == 'invalid') {
        React.$message({
          type: 'warning',
          content: '二维码失效！'
        })
      } else if (status == 'paying') {
        setTimeout(() => {
          this.hotelOrderPollingPayResult(orderId)
        }, 2000)
      }
    }

  }
  pollingPayResult = async (orderId) => {
    if (!this.state.remoteWeChatResultVisible) return
    const res = await apiOrderPollingPayResult({ orderId })
    if (res.code == 0) {
      const { status } = res.data
      if (status == 'success') {
        this.setState({
          orderId,
          completionVisible: true,
          remoteWeChatResultVisible: false
        }, () => {
          this.continueToPay()
        })
      } else if (status == 'invalid') {
        React.$message({
          type: 'warning',
          content: '二维码失效！'
        })
      } else if (status == 'paying') {
        setTimeout(() => {
          this.pollingPayResult(orderId)
        }, 2000)
      }
    }

  }
  continueToPay = async () => {
    let res
    if (this.state.serviceClassifyName === '酒店') {
      res = await apiPostHotelOrderDetail({ orderId: this.state.orderId })
      if (res.data && res.code === 0) {
        this.initData(res.data)
        this.setState({ thirdPartyVisible: false })
      }
    } else {
      res = await apiStandOrderDetail({ orderId: this.state.orderId })
      if (res.data && res.code === 0) {
        this.initData(res.data)
        this.setState({ thirdPartyVisible: false })
      }
    }

  }
  initData = (data) => {
    let collectionData = [
      {
        title: '服务费用',
        value: <React.$Price price={data.orderServicePrice} />
      },
      {
        title: '商品费用',
        value: <React.$Price price={data.orderProductPrice} />
      },
      {
        title: '其他费用',
        value: <React.$Price price={data.otherServicePrice} />
      },
      {
        title: '收费原因',
        value: data.remark
      },
      {
        title: '赠送积分',
        value: data.presentIntegral
      },
      {
        title: '应收金额',
        value: <React.$Price color="#EF3800" price={data.orderServicePrice + data.orderProductPrice + data.otherServicePrice} />
      },
      {
        title: '待收金额',
        value: <React.$Price color="#EF3800" price={data.orderDueInyPrice} />
      },
      {
        title: '折扣立减',
        value: <React.$Price color="#EF3800" price={data.couponTotal || 0} />
      },
      {
        title: '优惠金额',
        value: <React.$Price color="#EF3800" price={data.productMaxOutPrice || 0} />
      },
      {
        title: '优惠券立减',
        value: <React.$Price color="#EF3800" price={data.couponDiscountTotal} />
      },
    ]
    let payWayData = []
    if (data.orderDueInyPrice !== 0) {
      payWayData = data.payWay.map(v => {
        let obj = {}
        switch (v) {
          case 'Cash':
            obj = {
              title: '现金',
              icon: <WalletOutlined />,
              value: 'Cash'
            }
            break;
          case 'Alipay':
            obj = {
              title: '支付宝',
              icon: <AlipayOutlined />,
              value: 'Alipay'
            }
            break;
          case 'WeChat':
            obj = {
              title: '微信',
              icon: <WechatOutlined />,
              value: 'WeChat'
            }
            break;
          case 'Wallet':
            obj = {
              title: '余额',
              icon: <PayCircleOutlined />,
              value: 'Wallet'
            }
            break;
          case 'RemoteAlipay':
            obj = {
              title: '扫码支付（支付宝）',
              icon: <AlipayOutlined />,
              value: 'RemoteAlipay'
            }
            break;
          case 'RemoteWeChat':
            obj = {
              title: '扫码支付（微信）',
              icon: <WechatOutlined />,
              value: 'RemoteWeChat'
            }
            break;
          case 'Other':
            obj = {
              title: '其它',
              icon: <UnorderedListOutlined />,
              value: 'Other'
            }
            break;
        }
        return obj;
      })
    } else {
      payWayData = [{
        title: '现金',
        icon: <WalletOutlined />,
        value: 'Cash'
      }]
    }
    let orderId = data.orderId
    let payWay = data.payWay[0]
    this.setState({ collectionData, amountPrice: data.orderDueInyPrice, payWayData, orderId, payWay, payWayDescription: "" })
  }
  rejectReamkeChange = e => {
    this.setState({ cancelRemark: e.target.value })
  }
  rejectDialogSave = async () => {
    const { orderId, cancelRemark } = this.state
    this.setState({ rejectLoading: true })
    if (this.state.serviceClassifyName === '酒店') {
      let res = await apiPostHotelOrderCancel({ orderId, remark: cancelRemark })
      if (res.code === 0) {
        this.initState()
      } else {
        this.setState({ rejectLoading: false, rejectVisible: false }, () => {
          React.$message({
            type: 'info',
            content: '取消失败'
          })
        })
      }
    } else {
      let res = await apiStandOrderCancel({ orderId, remark: cancelRemark })
      if (res.code === 0) {
        this.initState()
      } else {
        this.setState({ rejectLoading: false, rejectVisible: false }, () => {
          React.$message({
            type: 'info',
            content: '取消失败'
          })
        })
      }
    }

  }
  initState = () => {
    let serviceClassifyId = ''
    if (this.state.serviceClassifyName === '酒店') {
      serviceClassifyId = this.state.serviceClassifyId
    }
    let state = {
      tabsServiceData: [],
      tabsCommodityData: [],
      radioOption: [
        {
          title: '服务列表',
          value: 'service'
        },
        {
          title: '商品列表',
          value: 'commodity'
        },
      ],
      buttonValue: 'service',
      serviceData: [],
      commodityData: [],
      serviceSelectData: [],
      commoditySelectData: [],
      priceId: '',
      totalCount: 0,
      totalPrice: 0,
      totalIntegral: 0,
      discountPrice: 0,
      discountReason: '',
      discountVisible: false,
      memberVisible: false,
      memberMobile: '',
      memberData: {},
      collectionData: [],
      payWayData: [],
      payWay: 'Cash',
      servicePageNo: 1,
      commodityPageNo: 1,
      serviceTotal: 0,
      commodityTotal: 0,
      storeServiceName: '',
      productNameOrCode: '',
      serviceSearchValue: '',
      commoditySearchValue: '',
      thirdLoading: false,
      rejectLoading: false,
      productClassifyId: '',
      rejectVisible: false,
      collectionVisible: false,
      orderId: '',
      showIndex: '',
      completionVisible: false,
      cancelRemark: '订单异常关闭',
      shoppingGuideId: '',
      scanCode: false,
    }
    this.setState({ ...state, serviceClassifyId }, () => {
      // this.componentDidMount('reload')
      this.props.history.replace('/cashier/cashier');
      window.location.reload()


    })
  }
  showInput = index => {
    this.setState({ showIndex: index })
  }
  changeServicePrice = (v, i, e) => {
    const { serviceSelectData, memberCouponIds } = this.state
    let arr = serviceSelectData.map(value => {
      if (value.index === v.index) {
        return {
          ...value,
          serviceRealPrice: React.$transNum(_.toNumber(e.target.value), 0, 2)
        }
      } else {
        return value
      }
    })
    if (!_.isEmpty(memberCouponIds)) {
      React.$message({
        type: 'info',
        content: '服务价格发生变动，请重新选择优惠券'
      })
    }
    this.setState({
      serviceSelectData: arr, showIndex: '',
      memberCouponIds: [], couponVisibleOpen: false
    }, () => {
      this.getCombined()
    })
  }
  print = async (data, fn) => {
    let token = sessionStorage.getItem('RSnetToken')
    await React.$post('/management/storeInfo/storePrinterName').then(async response => {
      const { receiptPrinterName } = response.data
      await axios.post(`http://localhost:8888/admin/bill/print/${receiptPrinterName}`, { ...data }, {
        headers: {
          'Content-Type': 'application/json;charset=UTF-8',
          'RSnetToken': token,
          'Accept': '*/*'
        }
      }).then(res => {
        fn && fn()
      }).catch(() => {
        fn && fn()
      })
    }).catch(() => {
      fn && fn()
    })
  }
  goToDetail = () => {
    // console.log("-----------goToDetail------------");
    this.setState({
      detailsVisible: true
    })
    // if (this.state.serviceClassifyName === '酒店') {
    //   this.props.history.push(`/hotelOrder/list/${this.state.orderId}`)
    // } else {
    //   // let res = await apiStandOrderSettlement({ orderId: this.state.orderId, shoppingGuideId: this.state.shoppingGuideId })
    //   // if (res.code === 0) {
    //   this.props.history.push(`/cashier/order/details/${this.state.orderId}`)
    //   // }
    // }
  }
  selectChange = (shoppingGuideId) => {
    this.setState({
      shoppingGuideId
    })
  }
  printQrCode = () => {
    React.$post('/management/storeInfo/storePrinterName').then(response => {
      const { storeName, QRCodePrinterName } = response.data
      apiIdentificationCodeAdd({}).then(res=>{
        if(res.code == 0){
          const list = res.data
          printQrCode({storeName,dataSource:list},()=>{
            this.setState({
              isModalVisible: false
            })
          })
        }
      })
      // axios.get(`http://localhost:8888/admin/bill/printCode/${QRCodePrinterName}/${50}/${encodeURIComponent(storeName)}`).then(res => {
      //   if (res.code === 0) {
      //     React.$message({
      //       type: 'info',
      //       content: '打印成功'
      //     })
      //   }
      // })
      
    })
  }
  showModal = () => {
    this.setState({
      isModalVisible: true
    })
  };
  handleCancel = () => {
    this.setState({
      isModalVisible: false
    })
  };

  CheckonChange = (e) => {
    //console.log(e)
    if (e) {
      this.setState({
        Visible: true,
        VisibleOpen: true,
        discountFlag: 1
      })
    } else {
      this.setState({
        Visible: false,
        VisibleOpen: false,
        discountFlag: 0,
        vcode: "",
        serviceDiscount: "",
        productDiscount: "",
        vuserId: "",
        discountRemark: "",
      }, () => {
        this.getCombined()
      })
    }
  }

  couponChange = (e) => {
    if (e) {
      let arr = Object.keys(this.state.memberData);
      if (arr.length !== 0) {
        this.setState({
          couponVisible: true,
          couponVisibleOpen: true,
          couponFlag: 1
        })
      } else {
        React.$message({
          type: "warning",
          content: "请先选择会员！"
        })
      }
    } else {
      this.setState({
        couponVisible: false,
        couponVisibleOpen: false,
        couponFlag: 0,
        memberCouponIds: []
      }, () => {
        this.getCombined()
      })
    }
  }
  // 满件优惠开关
  fullCouponChange = (e) => {
    // console.log(e);
    if (e) {
      this.setState({
        fullCoupon: true,
      })
    } else {
      this.fullGoodsClose()
      this.setState({
        fullCoupon: false,
      })
    }
  }
  // 满件优惠商品选择弹窗
  fullCouponGoodsChange = () => {
    // const { commoditySelectData } = this.state
    // console.log(commoditySelectData);
    // if(commoditySelectData.length > 0) {
    this.setState({
      fullGoodsOpen: true
    })
    // } else {
    //   React.$message({
    //     type: "warning",
    //     content: "请先添加商品至购物车！"
    //   })
    // }
  }
  fullGoodsClose = () => {
    this.setState({
      fullGoodsOpen: false,   //关闭商品折扣弹窗
      //清空折扣数据
      productMaxOutInput: false,
      fullGoods: "",
      productMaxOutId: null,
      productMaxOut: "",
      productMaxOutPrice: "",
      productMaxOutPriceMax: "99999.99"
    },()=>{
      this.getCombined()
    })
  }

  maxOutChange = (goods) => {
    if (goods.target.value) {
      this.setState({
        productMaxOutInput: true,
        fullGoods: goods.target.value,
        productMaxOutId: goods.target.value.productSkuId,
        productMaxOut: "",
        productMaxOutPrice: "",
        productMaxOutPriceMax: (goods.target.value.skuCurrentPrice / 100)
      })
      if (this.productMaxOutRef.current) {
        this.productMaxOutRef.current.value = null
        this.productMaxOutPriceRef.current.value = null
      }
    }
  }
  productMaxOutChange = (v) => {
    const { fullGoods } = this.state
    let price = fullGoods.skuCurrentPrice
    let outPrice = transNumber((Number.parseFloat(fullGoods.skuCurrentPrice - fullGoods.skuCurrentPrice * (v / 100))), 0)
    this.setState({
      productMaxOut: v,
      productMaxOutPrice: outPrice / 100
    })
  }
  productMaxOutPriceChange = (v) => {
    const { fullGoods } = this.state
    let maxOut = ((fullGoods.skuCurrentPrice - v * 100) / fullGoods.skuCurrentPrice * 100).toFixed(0)
    this.setState({
      productMaxOut: maxOut,
      productMaxOutPrice: v
    })
  }

  fullGoodsMaxOut = () => {
    this.setState({
      fullGoodsOpen: false,   //关闭商品折扣弹窗
    })
    this.getCombined()
  }

  empowerOk = () => {
    if (!this.state.vuserId) {
      React.$message({
        type: "warning",
        content: "请选择授权人！"
      })
      return false
    }
    if (!this.state.vcode) {
      React.$message({
        type: "warning",
        content: "请填写密码！"
      })
      return false
    }
    if (!this.state.discountRemark) {
      React.$message({
        type: "warning",
        content: "请填写折扣备注！"
      })
      return false
    }
    this.getCombined()

  }

  vuserChange = (e) => {
    this.setState({
      vuserId: e.target.value
    })
    //console.log(e.target.value);
  }

  getVCode = (e) => {
    this.setState({
      vcode: e.target.value
    }, () => {
      //console.log(this.state.vcode);
    })

  }
  getVerificationCode = async () => {
    let user = this.state.vuserId
    //console.log(user);
    if (!user) {
      React.$message({
        type: 'warning',
        content: '请选择授权人'
      })
      return false
    }
    if (this.state.CodeTime > 0) {
      return false
    }
    this.setState({ register_load: true })
    let res = await React.$post("/management/sys/user/sendVerification", { userId: user, expiration: 1 }) //expiration  验证码过期时间分钟
    //console.log(res, 'res获取验证码');
    if (res.code === 0) {
      this.setState({
        CodeTime: 60,
        register_load: false
      })
      let downCount = setInterval(() => {
        this.setState({
          CodeTime: this.state.CodeTime - 1
        })
        if (this.state.CodeTime === 0) {
          clearInterval(downCount)
          this.setState({
            downCount: null
          })
        }
      }, 1000);
      this.setState({
        downCount
      })
    } else {
      this.setState({
        register_load: false
      })
    }
  }

  productDiscountChange = (e) => {
    this.setState({
      productDiscount: e
    })
  }

  serviceDiscountChange = (e) => {
    this.setState({
      serviceDiscount: e
    })
  }

  discountRemarkChange = (e) => {
    //console.log(e.target.value);
    this.setState({
      discountRemark: e.target.value
    })
  }
  handleDetailsCancel = () => {
    this.setState({
      detailsVisible: false
    })
  }
  rightsOpen = (data) => {
    let arr = []
    let giftBalance = ""
    if (data.giftBalance) {
      giftBalance = "赠送" + (data.giftBalance / 100).toFixed(2) + "元余额；"
      arr.push(giftBalance)
    }
    if (data.storeServiceCouponVos.length > 0) {
      data.storeServiceCouponVos.map(res => {
        let storeServiceCoupon = "赠送" + res.couponTitle + "优惠券X" + res.giftCount
        arr.push(storeServiceCoupon)
      })
    }
    this.setState({
      rightsVisible: true,
      couponData: arr,
      couponVipTitle: data.serviceName,
      serviceVipPrice: data.serviceRealPrice
    })
  }
  couponTabChange = (value) => {
    this.setState({
      couponActiveKey: value
    })
  }

  haveUsedCoupon = () => {
    this.setState({
      haveUseCouponVisible: true
    })
  }

  chooseCoupon = (e) => {
    const { memberCouponIds } = this.state
    if (e.target.checked) {
      memberCouponIds.push(e.target.value)
    } else {
      memberCouponIds.map((v, i) => {
        if (v === e.target.value) {
          memberCouponIds.splice(i, 1)
        }
      })
    }
    this.setState({
      memberCouponIds
    })
  }

  cancelCharge = () => {
    this.setState({
      cancelChargeVisible: true
    })
  }
  cancelChargeOk = () => {
    const { cancelCharge } = this.state
    this.setState({
      cancelRemark: "手动取消订单"
    }, async () => {
      if (cancelCharge) {
        this.rejectDialogSave()
      } else {
        const { orderId, cancelRemark } = this.state
        this.setState({ rejectLoading: true })
        if (this.state.serviceClassifyName === '酒店') {
          let res = await apiPostHotelOrderCancel({ orderId, remark: cancelRemark })
          if (res.code === 0) {
            this.setState({
              collectionVisible: false,
              rejectLoading: false
            })
          } else {
            this.setState({ rejectLoading: false, rejectVisible: false }, () => {
              React.$message({
                type: 'info',
                content: '取消失败'
              })
            })
          }
        } else {
          let res = await apiStandOrderCancel({ orderId, remark: cancelRemark })
          if (res.code === 0) {
            this.setState({
              collectionVisible: false,
              rejectLoading: false
            })
          } else {
            this.setState({ rejectLoading: false, rejectVisible: false }, () => {
              React.$message({
                type: 'info',
                content: '取消失败'
              })
            })
          }
        }
      }
    })
    this.setState({
      cancelChargeVisible: false
    })
  }
  cancelChargeClose = () => {
    this.setState({
      cancelChargeVisible: false
    })
  }

  clearOrderChange = (event) => {
    const { cancelCharge } = this.state
    if (event.target.value !== cancelCharge) {
      this.setState({
        cancelCharge: event.target.value
      })
    } else {
      this.setState({
        cancelCharge: ''
      })
    }
  }

  render() {
    const { tabsServiceData, __html, remoteAlipayResultLoading, remoteAlipayResultVisible,
      remoteWeChatResultLoading, remoteWeChatQrCodeStr, remoteWeChatResultVisible, hotelDays,
      voiceOn, beauticianList, tabsCommodityData, register_load, radioOption, buttonValue,
      verificationCode, serviceData, mobileCodeCount, serviceSelectData, commodityData,
      commoditySelectData, totalCount, totalPrice, totalIntegral, memberVisible, memberData,
      discountVisible, discountPrice, discountPriceRecord, discountReasonRecord, collectionVisible,
      collectionData, payWayData, payWay, cashVisible, amountPrice, cashPriceReason, settlementVisible,
      differencePrice, cashPrice, completionVisible, thirdPartyVisible, loading, servicePageNo,
      commodityPageNo, serviceTotal, commodityTotal, serviceClassifyId, productClassifyId,
      serviceSearchValue, commoditySearchValue, aliPayVisible, weChatVisible, remoteAlipayVisible,
      remoteWeChatVisible, thirdLoading, rejectVisible, rejectLoading, showIndex, slaesmanData,
      shoppingGuideId, welcomeVisible, showInputFirst, isModalVisible, walletVisible, payWayDescription,
      Visible, empower, otherVisible, CodeTime, serviceClassifyName, detailsVisible, orderId, couponVisible,
      rightsVisible, couponData, couponVipTitle, couponVipList, couponActiveKey, memberCouponIds, discountMoney,
      haveUseCouponVisible, VisibleOpen, couponVisibleOpen, serviceVipPrice, cancelChargeVisible, cancelCharge,
      fullCoupon, fullGoodsOpen, productMaxOut, productMaxOutPrice, productMaxOutId, productMaxOutInput,
      productMaxOutPriceMax, fullGoods
    } = this.state

    let data = buttonValue === 'service' ? tabsServiceData : tabsCommodityData
    let pageNo = buttonValue === 'service' ? servicePageNo : commodityPageNo
    let total = buttonValue === 'service' ? serviceTotal : commodityTotal
    return (
      <Spin spinning={this.props.loadStatus} >
        <Modal title={'查看订单'} visible={detailsVisible} width={1200} onCancel={this.handleDetailsCancel} footer={null}>
          {
            serviceClassifyName === '酒店' ? <HotelDetails id={orderId}></HotelDetails> : <OrderDetails id={orderId}></OrderDetails>
          }
        </Modal>
        <div className='p-layout-box cashier'>



          {/* 修改bug的代码 */}
          {showInputFirst && <Input ref={ref => this.textRef = ref} />}

          <div className='cashier-left p-layout-content'>

            {/* 列表切换 */}
            <Space size={'large'}>
              <Radio.Group onChange={this.buttonChange} size={'large'} value={buttonValue} buttonStyle="solid">
                {
                  radioOption.map((v, i) => {
                    return <Radio.Button style={{ padding: '0 60px', borderRadius: `${i === 0 ? '12px 0 0 12px' : '0 12px 12px 0'}` }} value={v.value}>{v.title}</Radio.Button>
                  })
                }
              </Radio.Group>
              {/* 根据值切换搜索框 */}
              {buttonValue === 'service' && serviceClassifyName !== '酒店' && <Search
                ref={ref => this.serviceSearchRef = ref}
                onSearch={(e) => this.getService(e)}
                style={{ width: 200 }}
                placeholder={"请输入服务名称"}
                defaultValue={serviceSearchValue}
                allowClear
                enterButton
              />}
              {buttonValue === 'commodity' && <Search
                ref={ref => this.commoditySearchRef = ref}
                onSearch={(e) => this.getCommodity(e)}
                style={{ width: 260 }}
                placeholder={"请输入商品名称/商品编号"}
                defaultValue={commoditySearchValue}
                allowClear
                enterButton
              />}
              {/* <Button onClick={this.showModal}>打印二维码</Button>
            <Modal title="打印二维码" visible={isModalVisible} onOk={this.printQrCode} onCancel={this.handleCancel}>
              <p>即将打印50张二维码</p>
            </Modal> */}
            </Space>

            <div style={{ background: '#fff', marginTop: 20, height: 'calc(100% - 60px)' }}>
              {/* 根据值分别渲染服务/商品列表 */}
              <Tabs type='card' onChange={this.tabChange} tabPosition={'left'} size="large" tabBarGutter={20} activeKey={buttonValue === 'service' ? serviceClassifyId : productClassifyId} tabBarStyle={{ background: '#f2f2f2' }}>
                {
                  !_.isEmpty(data) && data.map(v => {
                    return <TabPane tab={v.tab} key={v.key}>
                      <Spin spinning={loading}>
                        <div style={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                          <div className='tabs-box'>
                            <Row gutter={[20, 20]}>
                              {/* 服务列表 */}
                              {
                                buttonValue === 'service' && (
                                  v.tab === '酒店' ?
                                    <div style={{ position: 'relative' }}>
                                      <div style={{ color: '#D9001B', position: 'absolute', top: '40px', right: '10px' }}>
                                        共计入住：{hotelDays + 1}天{hotelDays}晚
                                      </div>
                                      <Hotel putCar={this.putCar} data={serviceData} getSearch={this.hotelSearch} classifyId={v.key} ></Hotel>
                                    </div>
                                    : v.tab === '会员卡' ?
                                      serviceData.map(v => {
                                        return <Col>
                                          <div className='tab-item'>
                                            <div className='tab-item-name'>{v.serviceName}</div>
                                            <div>{v.storeServiceCouponVos && v.storeServiceCouponVos.length > 0 || v.giftBalance && v.giftBalance !== 0 ? <Button type="link" onClick={() => this.rightsOpen(v)}>权益详情</Button> : null}</div>
                                            <div className='tab-item-bottom'>
                                              <div>
                                                <div className='symbol'>￥</div>
                                                <div className="price">
                                                  {React.$transNum(v.serviceRealPrice, 2, -2)}
                                                </div>
                                              </div>
                                              <div onClick={() => this.putCar(v)}>
                                                <TheImage preview={false} src={increase} width={22} height={22} />
                                              </div>
                                            </div>
                                          </div>
                                        </Col>
                                      })
                                      : serviceData.map(v => {
                                        return <Col>
                                          <div className='tab-item'>
                                            <div className='tab-item-name'>{v.serviceName}</div>
                                            <div className='tab-item-bottom'>
                                              <div>
                                                <div className='symbol'>￥</div>
                                                <div className="price">
                                                  {React.$transNum(v.serviceRealPrice, 2, -2)}
                                                </div>
                                              </div>
                                              <div onClick={() => this.putCar(v)}>
                                                <TheImage preview={false} src={increase} width={22} height={22} />
                                              </div>
                                            </div>
                                          </div>
                                        </Col>
                                      })
                                )
                              }
                              {/* 商品列表 */}
                              {
                                buttonValue === 'commodity' && commodityData.map(v => {
                                  return <Col>
                                    <div className='tab-item'>
                                      <div className='tab-item-name'>{v.productName}</div>
                                      <div className='tab-item-commodity-sku'>
                                        <div>{v.productSkuSpecValue}</div>
                                      </div>
                                      <div className='tab-item-bottom'>
                                        <div>
                                          <div className='symbol'>￥</div>
                                          <div className="price">{<React.$Price color="red" price={v.skuCurrentPrice} symbol={''} />}</div>
                                        </div>
                                        <div onClick={() => this.putCommodityCar(v)}>
                                          <TheImage preview={false} src={increase} width={22} height={22} />
                                        </div>
                                      </div>
                                    </div>
                                  </Col>
                                })
                              }
                            </Row>
                          </div>
                          {buttonValue === 'service' && (
                            v.tab === '酒店' ? null :
                              <ThePagination pageNo={pageNo} pageSize={12} total={total} pageChange={this.pageChange} />
                          )}
                          {buttonValue === 'commodity' && (
                            <ThePagination pageNo={pageNo} pageSize={12} total={total} pageChange={this.pageChange} />
                          )}
                        </div>
                      </Spin>
                    </TabPane>
                  })
                }
              </Tabs>
            </div>
          </div>
          {/* 右侧购物车 */}
          <div className='cashier-right'>
            {/* 选择会员 */}
            {
              _.isEmpty(memberData) && <div className='member-box' onClick={this.memberDialogOpen}>
                <div>
                  <TheImage src={member} width={40} height={40} preview={false} />
                  点击选择会员
                </div>
                <TheImage src={select} width={8} height={14} preview={false} />
              </div>
            }
            {
              !_.isEmpty(memberData) &&
              <div className='member-box-has'>
                <div>
                  <Avatar src={<Image src={memberData.memberAvatar || member} style={{ width: 40, height: 40 }} />} size={40} />
                  <div className='member-information'>
                    <div>
                      <div className='p-white-space' style={{ width: 160 }}>{memberData.nickName.slice(0, 15)}</div>
                      {memberData.levelImg && <div style={{ display: 'flex', alignItems: 'center' }}>
                        <TheImage src={memberData.levelImg} width={18} height={18} preview={false} />
                        <span style={{ fontSize: 16, lineHeight: '16px' }}>{memberData.memberLevel}</span>
                      </div>}
                    </div>
                    <div>
                      <div>账号：{memberData.memberMobile}</div>
                    </div>
                    <div style={{ display: 'flex', 'justifyContent': 'space-between' }}>
                      <div>积分：{_.toNumber(memberData.scoreBalance).toLocaleString()}</div>
                      <div>余额：<React.$Price color="#000" price={_.toNumber(React.$transNum(memberData.totalBalance, 2))} symbol={''} /></div>
                    </div>
                    <div style={{ display: 'flex', 'justifyContent': 'space-between' }}>
                      <div><span onClick={() => this.haveUsedCoupon()}>优惠券：{couponVipList.noUsedMemberCouponList ? couponVipList.noUsedMemberCouponList.length : "0"}</span>&nbsp;<Tooltip title="该优惠券数量仅显示线下服务未使用的优惠券"><QuestionCircleOutlined /></Tooltip></div>
                      <div>累计充值：<React.$Price color="#000" price={memberData.sumBalance ? React.$transNum(memberData.sumBalance, 2) : "0"} symbol={''} />&nbsp;<Tooltip title="该用户会员卡累计充值的金额，不包括赠送的"><QuestionCircleOutlined /></Tooltip></div>
                    </div>
                  </div>
                </div>
                <div className='close-icon'>
                  <CloseOutlined onClick={this.clearMemberData} style={{ width: 16, height: 16, cursor: 'pointer' }} />
                </div>
              </div>
            }
            <div className='tabs-right-box'>
              {   // 酒店取消其他项
                (buttonValue === 'service' && serviceClassifyName === '酒店') ? null : <>
                  <div className='title'>其他项</div>
                  <Row gutter={[20, 20]} justify='center'>
                    <Col>
                      <div className='tab-item service'>
                        <div className='tab-item-name'>其他服务</div>
                        <div className='tab-item-bottom'>
                          <div>
                            <div className='symbol'>￥</div>
                            <div className="price">
                              <React.$Price color="#ef3800" price={_.toNumber(React.$transNum(discountPrice, 0, 2))} symbol={''} />
                              <FormOutlined onClick={this.openDiscountDialog} style={{ fontSize: 16, marginLeft: 10, cursor: 'pointer', color: '#000' }} />
                            </div>
                          </div>
                        </div>
                      </div>
                    </Col>
                  </Row>
                </>
              }

              {/* 酒店项 */}
              {
                (buttonValue === 'service' && serviceClassifyName === '酒店') ? <>
                  <div className='title'>其他项（酒店类）</div>
                  <Row gutter={[20, 20]} justify='center'>
                    <Col>
                      {
                        serviceSelectData.map((v, i) => {
                          return <RoomInfo ref={this.roomInfoRef} outCar={(v) => this.outCar(v, 'service')} info={v} member={memberData} hotelDays={hotelDays} getValues={(value) => this.getValues(value)}
                            changeServicePrice={(v, i, e) => this.changeServicePrice(v, i, e)}
                          ></RoomInfo>
                        })
                      }
                    </Col>
                  </Row>
                </> : <>

                  {/* 商品购物车 */}
                  {!_.isEmpty(commoditySelectData) && <div className='title'>商品项</div>}
                  <Row gutter={[0, 20]} justify='center'>
                    {
                      commoditySelectData.map((v, i) => {
                        return <Col>
                          <div className='tab-item commodity'>
                            <CloseOutlined onClick={() => this.outCar(v, 'commodity')} style={{ position: 'absolute', top: 5, right: 5 }} />
                            <div className='tab-item-name'>{v.productName}</div>
                            <div className='tab-item-commodity-sku'>
                              <div>{v.productSkuSpecValue}</div>
                            </div>
                            <div className='tab-item-bottom'>
                              <div>
                                <div className='symbol'>￥</div>
                                <div className="price">
                                  <React.$Price color="#ef3800" price={v.skuCurrentPrice} symbol={''} />
                                </div>
                              </div>
                              <div style={{ display: 'flex', alignItems: 'center' }}>
                                <TheImage
                                  style={{ visibility: parseInt(v.count) > 1 ? 'unset' : 'hidden' }}
                                  onClick={() => this.countChange('commodity', v, 'reduce')}
                                  preview={false}
                                  src={reduce}
                                  width={22}
                                  height={22} />

                                <InputNumber
                                  min={0}
                                  max={_.toNumber(v.skuStock)}
                                  ref={ref => this[`commodityCountRef${i}`] = ref}
                                  precision={0}
                                  onPressEnter={(e) =>
                                    this.countChange('commodity', v, 'input', e.target.value, `commodityCountRef${i}`)}
                                  style={{ width: 50, margin: '0 10px' }}
                                  size="small"
                                  value={v.count} />

                                <TheImage
                                  style={{ visibility: parseInt(v.count) < parseInt(v.skuStock) ? 'unset' : 'hidden' }}
                                  onClick={() => this.countChange('commodity', v, 'add')}
                                  preview={false}
                                  src={increase}
                                  width={22}
                                  height={22} />
                              </div>
                            </div>
                          </div>
                        </Col>
                      })
                    }
                  </Row>
                  {/* 服务购物车 */}
                  {!_.isEmpty(serviceSelectData) && <div className='title'>服务项</div>}
                  <Row gutter={[20, 20]} justify='center'>
                    {
                      serviceSelectData.map((v, i) => {
                        return <Col>
                          <div className='tab-item service'>
                            <CloseOutlined onClick={() => this.outCar(v, 'service')} style={{ position: 'absolute', top: 5, right: 5, cursor: 'pointer' }} />
                            <div className='tab-item-name'>{v.serviceName}</div>
                            <div className='tab-item-bottom'>
                              <div>
                                {
                                  showIndex !== i && <>
                                    <div className='symbol'>￥</div>
                                    <div className="price">
                                      {React.$transNum(v.serviceRealPrice, 2, -2)}
                                      {(buttonValue === 'service' && serviceClassifyName === '会员卡') ? null : <FormOutlined onClick={() => this.showInput(i)} style={{ fontSize: 16, marginLeft: 10, cursor: 'pointer', color: '#000' }} />}
                                    </div>
                                  </>
                                }
                                {
                                  showIndex === i && <Input
                                    autoFocus
                                    precision={2}
                                    min={0}
                                    ref={ref => this.showInputRef = ref}
                                    defaultValue={React.$transNum(v.serviceRealPrice, 2, -2)}
                                    onPressEnter={(e) => this.changeServicePrice(v, i, e)}
                                  />
                                }
                                <Select
                                  showSearch
                                  className='Beautician'
                                  placeholder="选择美容师"
                                  optionFilterProp="children"
                                  value={v.beauticianId}
                                  onChange={(e) => this.BeauticianChange(v, i, e)}
                                  filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
                                >
                                  {
                                    beauticianList.map(per => {
                                      return <Option value={per.shoppingBeauticianId} >{per.shoppingBeauticianName}</Option>
                                    })
                                  }
                                </Select>
                              </div>
                            </div>
                          </div>
                        </Col>
                      })
                    }
                  </Row>
                </>
              }


            </div>
            {/* 合计收款 */}
            <div className='collection-box'>
              {(buttonValue === 'service' && (serviceClassifyName === '酒店' || serviceClassifyName === '会员卡'))
                ? (buttonValue === 'service' && (serviceClassifyName !== '酒店' || serviceClassifyName === '会员卡')) ? null :
                  <div className='discount' >
                    <div>
                      <Space>
                        <Switch onClick={this.couponChange} checked={couponVisibleOpen} name="couponFlag" ></Switch>
                        优惠券
                      </Space>
                    </div>
                  </div>
                :
                <div className='discount'>
                  <div style={{ display: "flex", justifyContent: "space-between", width: "100%" }}>
                    <div>
                      <Switch onClick={this.CheckonChange} checked={VisibleOpen} name="discountFlag" disabled={fullCoupon} ></Switch>
                      <br />折扣
                    </div>
                    <div>
                      <Switch onClick={this.couponChange} checked={couponVisibleOpen} name="couponFlag" disabled={fullCoupon} ></Switch>
                      <br />优惠券
                    </div>
                    <TheButton type="text" hasPermi={['cashier:cashier:fullCouponGoods']} >
                      <Switch onClick={this.fullCouponChange} checked={fullCoupon} name="couponFlag" disabled={VisibleOpen || couponVisibleOpen} ></Switch>
                      <br />满件优惠
                    </TheButton>
                    <div>
                      {fullCoupon ? <TheButton onClick={() => this.fullCouponGoodsChange()} >选择商品</TheButton> : null}
                    </div>
                  </div>
                </div>
              }
              <div className='top'>
                <div className='count'>共<span>{totalCount}</span>项</div>
                <div className='price'>合计：
                  <div>￥</div>
                  <div className='price-num'>{React.$transNum(totalPrice, 2, -2)}</div>
                </div>
                <div className='integral'>会员积分：
                  <div>+</div>
                  <div>{_.toNumber(totalIntegral).toLocaleString()}</div>
                </div>
              </div>
              <div style={{ width: "100%", textAlign: "center", fontSize: "12px", color: "#bbb" }}>
                优惠金额：{React.$transNum(discountMoney, 2, -2)}
              </div>

              <div className='button' onClick={this.collectionDialogOpen}>
                <div>收 款</div>
              </div>
            </div>
          </div>
          <CashierModal
            title={'选择会员信息'}
            visible={memberVisible}
            onCancel={this.memberDialogClose}
            onOk={this.memberDialogSave}
            width={400}
            footer={
              memberData === null ?
                <div className='completion-button-group'>
                  <div onClick={this.registerMember} className='dialog-footer-button'>
                    <div>注册会员</div>
                  </div>
                </div> : ''
            }
          >
            {
              memberData === null ? (<>
                <div className='cashier-modal-input-box'>
                  <Input onPressEnter={this.memberDialogSave} onChange={this.getMemberMobile} placeholder='请输入会员手机号（必填）' />
                </div>
                <div className='cashier-modal-input-box'>
                  <Input onPressEnter={this.memberDialogSave} onChange={this.getMemberMobileRepeat} placeholder='请确认会员手机号（必填）' />
                </div>
                <div className='cashier-modal-input-box'>
                  <Input placeholder='请输入用户名（选填）' maxLength={15} onChange={this.getMemberName} />
                </div>
              </>
              )
                : <div className='cashier-modal-input-box'>
                  <Input onPressEnter={this.memberDialogSave} onChange={this.getMemberMobile} placeholder='请输入会员手机号' />
                </div>
            }
            {/* {
              memberData === null ? (<div className='cashier-modal-input-box'>
                <Input.Group compact>
                  <Input style={{
                    width: 'calc(100% - 105px)',
                  }} placeholder='请输入验证码'
                    onChange={this.getMobileCode}
                  />
                  <Button loading={register_load} type="primary" style={{ width: 105, 'background': mobileCodeCount > 0 ? '#666' : '' }} onClick={() => this.getVerifyCode()}>{mobileCodeCount ? mobileCodeCount + 's' : '获取验证码'}</Button>
                </Input.Group>
              </div>) : ''
            } */}
          </CashierModal>
          <CashierModal
            title={'其他服务'}
            visible={discountVisible}
            onCancel={this.discountDialogClose}
            onOk={this.discountDialogSave}
            width={400}
          >
            <div className='discount cashier-modal-input-box'>
              <span>金额</span>
              <InputNumber
                allowClear
                style={{ width: 300 }}
                placeholder='请输入金额'
                value={discountPriceRecord ? discountPriceRecord : ''}
                ref={ref => this.discountPriceRef = ref}
                min={0}
                precision={2}
                onChange={this.discountPriceChange} />
            </div>
            <div className='discount cashier-modal-input-box'>
              <span>原因</span>
              <Input
                allowClear
                maxLength={30}
                style={{ width: 300 }}
                placeholder='请输入原因'
                value={discountReasonRecord}
                ref={ref => this.discountReasonRef = ref}
                onChange={this.discountReasonChange} />
            </div>
          </CashierModal>

          <CashierModal
            title="收款结算"
            visible={collectionVisible}
            onCancel={this.cancelCharge}
            width={1500}
            footer={
              <div className='completion-button-group'>
                <div onClick={this.collectionDialogReject} className='dialog-footer-button'>
                  <div>取消收款</div>
                </div>
                <div onClick={this.collectionDialogSave} className='dialog-footer-button'>
                  <div>确认收款</div>
                </div>
              </div>
            }
          >
            <div className='collection-box'>
              <div className='collection-information'>
                <div className='collection-title'>费用结算</div>
                <div className="collection-information-content">
                  {
                    collectionData.map(v => {
                      return <div className='collection-information-content-item'>
                        <div>{v.title}</div>
                        <div>{v.value}</div>
                      </div>
                    })
                  }
                </div>
              </div>
              <div className='collection-pay-way'>
                <div className='collection-title'>支付方式</div>
                <div className="collection-pay-way-content">
                  <Radio.Group onChange={this.payWayChange} size={'large'} value={payWay} buttonStyle="solid">
                    {
                      payWayData.map((v, i) => {
                        return <Radio.Button value={v.value}>{v.icon}{v.title}</Radio.Button>
                      })
                    }
                  </Radio.Group>
                </div>
              </div>
              <div className='collection-information' style={{ marginTop: 20 }}>
                <div className='collection-title'>导购员</div>
                <div className="collection-information-content">
                  <div className='collection-information-content-item'>
                    <div>导购员</div>
                    <div>
                      <Select allowClear
                        defaultValue={shoppingGuideId}
                        onChange={this.selectChange}
                        placeholder="请选择导购员"
                        style={{ width: 200 }}
                        options={slaesmanData} />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </CashierModal>
          {/* 取消订单 */}
          <Modal
            title="确认关闭该弹窗吗？"
            visible={cancelChargeVisible}
            // visible={true}
            onCancel={this.cancelChargeClose}
            onOk={this.cancelChargeOk}
            zIndex={999999}
          >
            <div style={{ textAlign: "center" }}>
              <Radio value={'clear'} onClick={(e) => this.clearOrderChange(e)} checked={cancelCharge === 'clear' ? true : false}>清空收银台订单信息？</Radio>
            </div>
          </Modal>

          <CashierModal
            title="现金结算"
            visible={cashVisible}
            onCancel={this.cashDialogClose}
            onOk={this.cashDialogSave}
            width={400}
          >
            <div className='amount-price'>应收金额：{<React.$Price price={amountPrice} />}</div>
            <InputNumber
              min={0}
              max={1000000}
              precision={2}
              placeholder="请输入收款金额"
              onChange={this.cashChange}
              onPressEnter={this.cashDialogSave}
              ref={ref => this.cashInputRef = ref}
              value={cashPriceReason}
              style={{ marginBottom: "10px" }}
            />
            <Input
              allowClear
              maxLength={200}
              placeholder='POS机刷卡请备注'
              value={payWayDescription}
              ref={ref => this.payWayDescriptionRef = ref}
              onChange={this.payWayDescriptionChange} />
          </CashierModal>
          <CashierModal
            title="其他"
            visible={otherVisible}
            onCancel={this.otherDialogClose}
            onOk={this.otherDialogSave}
            width={400}
          >
            <div className='amount-price'>应收金额：{<React.$Price price={amountPrice} />}</div>
            <InputNumber
              min={0}
              max={1000000}
              precision={2}
              placeholder="请输入收款金额"
              onChange={this.cashChange}
              ref={ref => this.cashInputRef = ref}
              value={cashPriceReason}
              style={{ marginBottom: "10px" }}
            />
            <Input
              allowClear
              maxLength={200}
              placeholder='请输入请备注'
              value={payWayDescription}
              ref={ref => this.payWayDescriptionRef = ref}
              onChange={this.payWayDescriptionChange} />
          </CashierModal>
          <CashierModal
            title="余额结算"
            visible={walletVisible}
            onCancel={this.walleDialogClose}
            onOk={this.walletDialogSave}
            width={400}
          >
            <div className='amount-price'>应收金额：{<React.$Price price={amountPrice} />}</div>
            <InputNumber
              min={0}
              max={1000000}
              precision={2}
              placeholder="请输入收款金额"
              onChange={this.cashChange}
              onPressEnter={this.walletDialogSave}
              ref={ref => this.cashInputRef = ref}
              value={cashPriceReason}
            />
          </CashierModal>
          <CashierModal
            title="支付宝结算"
            visible={aliPayVisible}
            onCancel={this.alipayDialogClose}
            onOk={this.alipayDialogSave}
            width={400}
          >
            <div className='amount-price'>应收金额：{<React.$Price price={amountPrice} />}</div>
            <InputNumber
              min={0}
              max={_.toNumber(React.$transNum(amountPrice, 2, -2))}
              precision={2}
              placeholder="请输入收款金额"
              onChange={this.cashChange}
              onPressEnter={this.alipayDialogSave}
              ref={ref => this.cashInputRef = ref}
              value={cashPriceReason}
            />
          </CashierModal>

          <CashierModal
            title="微信结算"
            visible={weChatVisible}
            onCancel={this.weChatDialogClose}
            onOk={this.weChatDialogSave}
            width={400}
          >
            <div className='amount-price'>应收金额：{<React.$Price price={amountPrice} />}</div>
            <InputNumber
              min={0}
              max={_.toNumber(React.$transNum(amountPrice, 2, -2))}
              precision={2}
              placeholder="请输入收款金额"
              onChange={this.cashChange}
              onPressEnter={this.weChatDialogSave}
              ref={ref => this.cashInputRef = ref}
              value={cashPriceReason}
            />
          </CashierModal>
          <CashierModal
            title="扫码支付（支付宝）"
            visible={remoteAlipayVisible}
            onCancel={this.remoteAlipayDialogClose}
            onOk={this.remoteAlipayDialogSave}
            width={400}
          >
            <div className='amount-price'>应收金额：{<React.$Price price={amountPrice} />}</div>

          </CashierModal>
          <CashierModal
            title="扫码支付（微信）"
            visible={remoteWeChatVisible}
            onCancel={this.remoteWeChatDialogClose}
            onOk={this.remoteWeChatDialogSave}
            width={400}
          >
            <div className='amount-price'>应收金额：{<React.$Price price={amountPrice} />}</div>

          </CashierModal>
          <CashierModal
            title="现金找零"
            visible={settlementVisible}
            onCancel={this.settlementDialogClose}
            onOk={this.settlementDialogSave}
            width={400}
          >
            <div className='settlement-box'>
              <div>
                <div>应收金额：{<React.$Price price={amountPrice} />}</div>
                <div>支付金额：{<React.$Price price={React.$transNum(cashPrice, 0, 2)} />}</div>
              </div>
              <div>
                <div>找零：</div>
                {<React.$Price price={differencePrice} color="red" />}
              </div>
            </div>
          </CashierModal>

          <CashierModal
            title="收款结算"
            visible={completionVisible}
            onCancel={this.completionDialogClose}
            footer={
              <div className='completion-button-group'>
                <div onClick={() => this.goToDetail()} className='dialog-footer-button'>
                  <div>查看订单</div>
                </div>
                <div onClick={this.completionDialogClose} className='dialog-footer-button'>
                  <div>返回继续收款</div>
                </div>
              </div>
            }
          >
            <div className='finish-box'>
              <TheImage src={finish} width={256} height={188} preview={false} />
              <div>结算成功</div>
              <div>通过账单可查看详情</div>
            </div>
            <div className='collection-box'>
              <div className='collection-information'>
                <div className='collection-title'>费用结算</div>
                <div className="collection-information-content">
                  {
                    collectionData.map(v => {
                      return <div className='collection-information-content-item'>
                        <div>{v.title}</div>
                        <div style={v.style}>{v.value}</div>
                      </div>
                    })
                  }
                </div>
              </div>
            </div>
          </CashierModal>
          <CashierModal
            title="扫码结算（支付宝）"
            width={600}
            visible={remoteAlipayResultVisible}
            onCancel={this.remoteAlipayResultDialogClose}
            footer={
              <div className='completion-button-group'>

                <div onClick={this.remoteAlipayResultDialogClose} className='dialog-footer-button'>
                  <div>取消</div>
                </div>
                <div onClick={this.remoteAlipayResultDialogSave} className='dialog-footer-button'>
                  <div>前去收款</div>
                </div>
              </div>
            }
          >
            <Spin spinning={thirdLoading}>
              <div className='third-party-box'>
                <div>是否确认跳转支付宝二维码收款?</div>
                <div dangerouslySetInnerHTML={{ __html: __html }}></div>
              </div>
            </Spin>
          </CashierModal>
          <CashierModal
            title="扫码结算（微信）"
            width={600}
            visible={remoteWeChatResultVisible}
            onCancel={this.remoteWeChatResultDialogClose}
            footer={
              <div className='completion-button-group'>

                <div onClick={this.remoteWeChatResultDialogClose} className='dialog-footer-button'>
                  <div>取消收款</div>
                </div>
                <div onClick={this.remoteWeChatDialogSave} className='dialog-footer-button'>
                  <div>刷新</div>
                </div>
              </div>
            }
          >
            <Spin spinning={thirdLoading}>
              <div className='third-party-box'>
                <div>请使用微信扫码支付</div>
                <QRCode
                  id={'qrid'}
                  value={remoteWeChatQrCodeStr}

                  size={200} // 二维码的大小
                  fgColor="#000000" // 二维码的颜色
                  style={{ margin: 'auto' }}
                  imageSettings={{ // 二维码中间的logo图片
                    src: logoUrl,
                    height: 40,
                    width: 40,
                    excavate: false, // 中间图片所在的位置是否镂空
                  }}
                  level="H"
                />
                <Paragraph copyable>{remoteWeChatQrCodeStr}</Paragraph>
              </div>
            </Spin>
          </CashierModal>
          <CashierModal
            title="三方结算"
            width={600}
            visible={thirdPartyVisible}
            onCancel={this.thirdPartyDialogClose}
            footer={
              <div className='completion-button-group'>
                <div onClick={this.thirdPartyDialogClose} className='dialog-footer-button'>
                  <div>取消收款</div>
                </div>
              </div>
            }
          >
            <Spin spinning={thirdLoading}>
              <div className='third-party-box'>
                <TheImage src={thirdParty} width={306} height={188} preview={false} />
                <div>使用扫码枪扫描客户付款码</div>
              </div>
            </Spin>
          </CashierModal>

          <CashierModal
            title="取消收款"
            width={500}
            visible={rejectVisible}
            onCancel={() => this.setState({ rejectVisible: false })}
            footer={
              <div className='completion-button-group'>
                <div style={{ width: 200 }} onClick={() => this.setState({ rejectVisible: false })} className='dialog-footer-button'>
                  <div>取消</div>
                </div>
                <div style={{ width: 200 }} onClick={this.rejectDialogSave} className='dialog-footer-button'>
                  <div>确认</div>
                </div>
              </div>
            }
          >
            <Spin spinning={rejectLoading}>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span>取消原因</span>
                <Input maxLength={30} onChange={this.rejectReamkeChange} style={{ width: 380 }} />
              </div>
            </Spin>
          </CashierModal>
          {/* <Modal title="哈奇马收银系统" visible={welcomeVisible} onOk={() => this.setState({ welcomeVisible: false })} onCancel={() => this.setState({ welcomeVisible: false })}>
              <p>欢迎使用哈奇马收银系统</p>
            </Modal> */}
          <CashierModal title="哈奇马收银系统" visible={Visible} onOk={() => this.empowerOk()} onCancel={() => this.CheckonChange(false)}>
            <div style={{ marginBottom: "15px" }}>
              <span>授权人：</span>
              <Radio.Group label="" name='vuserId' onChange={this.vuserChange}>
                {
                  empower.map(v => {
                    return <Radio value={v.userId} >{v.userName}</Radio>
                  })
                }
              </Radio.Group>
            </div>
            <div style={{ marginBottom: "15px" }}>
              <span style={{ float: "left" }} >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码：</span>
              {/* <span style={{ width: "70%" }}> */}
              {/* <Input.Group compact  > */}
              <Input type='password' style={{
                width: '260px',
              }} placeholder='请输入密码' autocomplete="new-password"
                onChange={this.getVCode}
              />
              {/* <Button loading={register_load} type="primary" style={{ width: 110, 'background': CodeTime > 0 ? '#666' : '' }} onClick={() => this.getVerificationCode()}>{CodeTime ? CodeTime + 's' : '获取验证码'}</Button> */}
              {/* </Input.Group> */}
              {/* </span> */}
            </div>
            <div style={{ marginBottom: "15px" }}>
              <span>商品折扣：</span>
              <InputNumber min={0} max={100} style={{ width: "260px" }} precision={0}
                onChange={(e) => this.productDiscountChange(e)} /> %
            </div>
            <div style={{ marginBottom: "15px" }}>
              <span>服务折扣：</span>
              <InputNumber min={0} max={100} style={{ width: "260px" }} precision={0}
                onChange={(e) => this.serviceDiscountChange(e)} /> %
            </div>
            <span>折扣备注：</span>
            <Input maxLength={100} onChange={(e) => this.discountRemarkChange(e)} />
          </CashierModal>

          {/* 会员卡权益 */}
          <CashierModal
            title={couponVipTitle + "服务详情"}
            width={500}
            visible={rightsVisible}
            onCancel={() => this.setState({ rightsVisible: false })}
            onOk={() => this.setState({ rightsVisible: false })}
          >
            <div>
              {(serviceVipPrice / 100).toFixed(2) + "元会员卡余额以及以下权益明细"}
              {
                couponData.map((res, index) => {
                  return <div>{(index + 1) + '、' + res}</div>
                })
              }
            </div>
          </CashierModal>

          {/* 会员优惠券 可用不可用 */}
          <CashierModal
            title="优惠券"
            width={500}
            visible={couponVisible}
            onCancel={() => this.getCombined()}
            onOk={() => this.getCombined()}
          >
            {couponVipList && <Tabs type='card' onChange={this.couponTabChange} size="large" tabBarGutter={20} activeKey={couponActiveKey} >
              <TabPane tab={"可用优惠券"} key={1}>
                {couponVipList.validMemberCouponList && couponVipList.validMemberCouponList.length > 0 ? <List pagination={{
                  onChange: (page) => {
                    console.log(page);
                  }, pageSize: 5
                }} dataSource={couponVipList.validMemberCouponList}
                  split={false}
                  size="small"
                  renderItem={(item) => {
                    return <List.Item>
                      <div style={{ width: "100%", marginBottom: "5px", border: "1px solid black", display: "flex", justifyContent: "space-between" }} >
                        <div style={{ width: "30%", backgroundColor: "#9a9a9a", textAlign: "center", lineHeight: "35px" }}>
                          <div style={{ fontSize: "18px" }}>￥{<React.$Price price={item.couponPrice} symbol={''} />}</div>
                          <div>{item.usePrice === -1 ? "无门槛" : "满" + item.usePrice / 100 + "元可用"}</div>
                        </div>
                        <div style={{ width: "60%", backgroundColor: "#efefef", paddingLeft: "10px" }}>
                          <div className='theTitle'>{item.couponTitle + (item.couponType === "J" ? "代金券" : "折扣券")}</div>
                          <div>{item.startTime + "-" + item.endTime}</div>
                          <div>券编号：{item.couponCode}</div>
                        </div>
                        <div style={{ width: "10%", lineHeight: "70px", backgroundColor: "#efefef" }}>
                          <Checkbox
                            value={item.memberCouponId}
                            checked={memberCouponIds.includes(item.memberCouponId)}
                            onChange={this.chooseCoupon} />
                        </div>
                      </div>
                    </List.Item>
                  }}>
                </List>
                  : <div style={{ textAlign: "center", height: "90px", lineHeight: "90px" }}>暂无未使用优惠券</div>}
              </TabPane>
              <TabPane tab={"不可用优惠券"} key={2}>
                {couponVipList.invalidMemberCouponList && couponVipList.invalidMemberCouponList.length > 0 ? <List pagination={{
                  onChange: (page) => {
                    console.log(page);
                  }, pageSize: 5
                }} dataSource={couponVipList.invalidMemberCouponList}
                  split={false}
                  size="small"
                  renderItem={(item) => {
                    return <List.Item>
                      <div style={{ width: "100%", marginBottom: "5px", border: "1px solid black", display: "flex", justifyContent: "space-between" }} >
                        <div style={{ width: "30%", backgroundColor: "#9a9a9a", textAlign: "center", lineHeight: "35px" }}>
                          <div style={{ fontSize: "18px" }}>￥{<React.$Price price={item.couponPrice} symbol={''} />}</div>
                          <div>{item.usePrice === -1 ? "无门槛" : "满" + item.usePrice / 100 + "元可用"}</div>
                        </div>
                        <div style={{ width: "70%", backgroundColor: "#efefef", paddingLeft: "10px" }}>
                          <div className='theTitle'>{item.couponTitle + (item.couponType === "J" ? "代金券" : "折扣券")}</div>
                          <div>{item.startTime + "-" + item.endTime}</div>
                          <div>{item.reason}</div>
                        </div>
                      </div>
                    </List.Item>
                  }}>
                </List>
                  : <div style={{ textAlign: "center", height: "90px", lineHeight: "90px" }}>暂无未使用优惠券</div>}
              </TabPane>
            </Tabs>}
          </CashierModal>
          {/* 会员优惠券 未使用  已使用 */}
          <CashierModal
            title="优惠券"
            width={500}
            visible={haveUseCouponVisible}
            // visible={true}
            onCancel={() => this.setState({ haveUseCouponVisible: false })}
            onOk={() => this.setState({ haveUseCouponVisible: false })}
          >
            {couponVipList && <Tabs type='card' onChange={this.couponTabChange} size="large" tabBarGutter={20} activeKey={couponActiveKey} >
              <TabPane tab={"未使用优惠券"} key={1}>
                {couponVipList.noUsedMemberCouponList && couponVipList.noUsedMemberCouponList.length > 0 ? <List pagination={{
                  onChange: (page) => {
                    console.log(page);
                  }, pageSize: 5
                }} dataSource={couponVipList.noUsedMemberCouponList}
                  split={false}
                  size="small"
                  renderItem={(item) => {
                    return <List.Item >
                      <div style={{ width: "100%", marginBottom: "5px", border: "1px solid black", display: "flex", justifyContent: "space-between" }} >
                        <div style={{ width: "35%", backgroundColor: "#9a9a9a", textAlign: "center", lineHeight: "35px" }}>
                          <div style={{ fontSize: "18px" }}>￥{<React.$Price price={item.couponPrice} symbol={''} />}</div>
                          <div>{item.usePrice === -1 ? "无门槛" : "满" + item.usePrice / 100 + "元可用"}</div>
                        </div>
                        <div style={{ width: "65%", backgroundColor: "#efefef", paddingLeft: "10px" }}>
                          <div className='theTitle'>{item.couponTitle + (item.couponType === "J" ? "代金券" : "折扣券")}</div>
                          <div>{item.startTime + "-" + item.endTime}</div>
                          <div>券编号：{item.couponCode}</div>
                        </div>
                      </div>
                    </List.Item>
                  }}
                >
                </List>
                  : <div style={{ textAlign: "center", height: "90px", lineHeight: "90px" }}>暂无未使用优惠券</div>}
              </TabPane>
              <TabPane tab={"已使用优惠券"} key={2}>
                {couponVipList.usedMemberCouponList && couponVipList.usedMemberCouponList.length > 0 ?
                  <List pagination={{
                    onChange: (page) => {
                      console.log(page);
                    }, pageSize: 5
                  }} dataSource={couponVipList.usedMemberCouponList}
                    split={false}
                    size="small"
                    renderItem={(item) => {
                      return <List.Item >
                        <div style={{ width: "100%", marginBottom: "5px", border: "1px solid black", display: "flex", justifyContent: "space-between" }} >
                          <div style={{ width: "25%", backgroundColor: "#9a9a9a", textAlign: "center", lineHeight: "35px" }}>
                            <div style={{ fontSize: "18px" }}>￥{<React.$Price price={item.couponPrice} symbol={''} />}</div>
                            <div>{item.usePrice === -1 ? "无门槛" : "满" + item.usePrice / 100 + "元可用"}</div>
                          </div>
                          <div style={{ width: "60%", backgroundColor: "#efefef", paddingLeft: "10px" }}>
                            <div className='theTitle'>{item.couponTitle + (item.couponType === "J" ? "代金券" : "折扣券")}</div>
                            <div>{item.startTime + "-" + item.endTime}</div>
                            <div>券编号：{item.couponCode}</div>
                          </div>
                          <div style={{ width: "15%", lineHeight: "70px", backgroundColor: "#efefef", fontSize: "20px" }}>
                            已使用
                          </div>
                        </div>
                      </List.Item>
                    }}
                  >
                  </List>
                  : <div style={{ textAlign: "center", height: "90px", lineHeight: "90px" }}>暂无未使用优惠券</div>}
              </TabPane>
            </Tabs>}
          </CashierModal>

          <Modal
            title="选择折扣商品"
            visible={fullGoodsOpen}
            width={1000}
            onCancel={() => this.fullGoodsClose()}
            footer={false}
            destroyOnClose
          >
            <h4>请选择商品并输入折扣比例</h4>
            {!_.isEmpty(commoditySelectData) ?
              <div className='tabs-box' style={{position: 'relative', paddingBottom:'90px'}} >
                <Radio.Group name="productMaxOutId" defaultValue={fullGoods} onChange={(v) => this.maxOutChange(v)} >
                  <Row gutter={[20, 20]}>
                    {commoditySelectData.map((v, i) => {
                      return <Col className='tab-item' style={{marginRight:20}}>
                        <Radio value={v} >
                          <div >
                            <div className='tab-item-name'>{v.productName}</div>
                            <div className='tab-item-commodity-sku'>
                              <div>{v.productSkuSpecValue}</div>
                            </div>
                            <div className='tab-item-bottom'>
                              <div>
                                <div className='symbol'>￥</div>
                                <div className="price">
                                  <React.$Price color="#ef3800" price={v.skuCurrentPrice} symbol={''} />
                                </div>
                              </div>
                            </div>
                          </div>
                        </Radio>
                      </Col>
                    })}
                  </Row>
                </Radio.Group>
                {productMaxOutInput && <div style={{ textAlign: "right", position: "absolute", right: 0, bottom: 0 }}>
                  <Space direction="vertical">
                    <div>
                      商品打折： <InputNumber ref={this.productMaxOutRef} precision={0} style={{ width: '150px' }} value={productMaxOut} min={0} max={100} addonAfter={"%"} onChange={(value) => this.productMaxOutChange(value)} />
                    </div>
                    <div>
                      优惠金额： <InputNumber ref={this.productMaxOutPriceRef} precision={2} style={{ width: '150px' }} value={productMaxOutPrice} min={0} max={productMaxOutPriceMax} addonAfter={"元"} onChange={(value) => this.productMaxOutPriceChange(value)} />
                    </div>
                  </Space>
                </div>}
              </div> :
              <div style={{ width: "100%", height: "400px", textAlign: "center", lineHeight: "40px", paddingTop: "150px" }}>
                <p>暂无加购商品</p>
                <p>请返回收银台加购商品后再尝试哦~</p>
              </div>
            }

            <Divider></Divider>
            <div style={{ width: "100%", height: "80px", display: "flex" }}>
              <div style={{ width: "60%", }}>
                {fullGoods && <div>
                  已选择：{fullGoods.productName}，规格：{fullGoods.productSkuSpecValue}
                </div>}
                {productMaxOut !== '' && productMaxOutPrice !== '' && <div style={{ color: "#ef3800" }}>
                  打折{productMaxOut}%，优惠<React.$Price color="#ef3800" price={productMaxOutPrice * 100} symbol={''} />元
                </div>}
              </div>
              <div style={{ width: "40%", textAlign: "right", paddingTop: "40px" }}>
                <Space>
                  <TheButton type="defalut" size="middle" onClick={() => this.fullGoodsClose()} >取消</TheButton>
                  <TheButton type="primary" size="middle" disabled={!productMaxOut && !productMaxOutId && !productMaxOutPrice} onClick={() => this.fullGoodsMaxOut()}  >确定</TheButton>
                </Space>
              </div>
            </div>
          </Modal>
          {/* <CashierModal
          title="收银系统"
          width={500}
          visible={welcomeVisible}
          onCancel={() => this.setState({ welcomeVisible: false })}
          onOk={() => this.setState({ welcomeVisible: false })}
        >
          <div style={{ display: 'flex', justifyContent: 'center', fontSize: 22, fontWeight: 600, color: '#F52A2A' }}>欢迎使用</div>
        </CashierModal> */}
        </div>
      </Spin>

    )
  }
}
const mapStateToProps = (state) => {
  return {
    loadStatus: state.loadStatus,
  };
};
export default connect(mapStateToProps, null)(Cashier);
